@pallasoft/ps-core-components 2.35.2 → 2.37.0

package/dist/components/ps-action-tile-content.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface PsActionTileContentProps {
+    description?: string;
+    icon?: ReactNode;
+    label: string;
+    variant: 'default' | 'primary';
+}
+export declare const PsActionTileContent: ({ description, icon, label, variant, }: PsActionTileContentProps) => import("react").JSX.Element;

package/dist/components/ps-action-tile-content.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsActionTileContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsActionTileContent = ({ description, icon, label, variant, }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block break-words', children: label }), description ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', variant === 'primary' ? 'bg-white/15 text-white' : 'ps-icon-surface'), children: icon })) : null] }));
+exports.PsActionTileContent = PsActionTileContent;

package/dist/components/ps-action-tile-link.d.ts

@@ -0,0 +1,10 @@
+import type { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';
+export interface PsActionTileLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    description?: string;
+    href: string;
+    icon?: ReactNode;
+    label: string;
+    LinkComponent?: ElementType;
+    variant?: 'default' | 'primary';
+}
+export declare const PsActionTileLink: ({ className, description, href, icon, label, LinkComponent, variant, ...props }: PsActionTileLinkProps) => import("react").JSX.Element;

package/dist/components/ps-action-tile-link.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsActionTileLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_action_tile_content_1 = require("./ps-action-tile-content");
+const variantClassNames = {
+    default: 'ps-action-tile',
+    primary: 'ps-action-tile ps-action-tile-primary',
+};
+const PsActionTileLink = ({ className, description, href, icon, label, LinkComponent, variant = 'default', ...props }) => {
+    const linkClassName = ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className);
+    const content = ((0, jsx_runtime_1.jsx)(ps_action_tile_content_1.PsActionTileContent, { description: description, icon: icon, label: label, variant: variant }));
+    return LinkComponent ? ((0, jsx_runtime_1.jsx)(LinkComponent, { className: linkClassName, prefetch: 'intent', to: href, ...props, children: content })) : ((0, jsx_runtime_1.jsx)("a", { className: linkClassName, href: href, ...props, children: content }));
+};
+exports.PsActionTileLink = PsActionTileLink;

package/dist/components/ps-action-tile.js

@@ -4,10 +4,11 @@ exports.PsActionTile = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
+const ps_action_tile_content_1 = require("./ps-action-tile-content");
 const ps_skeleton_1 = require("./ps-skeleton");
 const variantClassNames = {
     default: 'ps-action-tile',
     primary: 'ps-action-tile ps-action-tile-primary',
 };
-const PsActionTile = ({ className, description, icon, isLoading = false, label, type = 'button', variant = 'default', ...props }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-16', className), shape: ps_skeleton_shape_1.PsSkeletonShape.Card })) : ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block break-words', children: label }), description ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', variant === 'primary' ? 'bg-white/15 text-white' : 'ps-icon-surface'), children: icon })) : null] }));
+const PsActionTile = ({ className, description, icon, isLoading = false, label, type = 'button', variant = 'default', ...props }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-16', className), shape: ps_skeleton_shape_1.PsSkeletonShape.Card })) : ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: (0, jsx_runtime_1.jsx)(ps_action_tile_content_1.PsActionTileContent, { description: description, icon: icon, label: label, variant: variant }) }));
 exports.PsActionTile = PsActionTile;

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

@@ -9,6 +9,6 @@ const PsCappedList = ({ getKey, items, renderItem, showAllLabel, visibleRows = p
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
     const isCapped = !isExpanded && items.length > visibleRows;
     const shown = isCapped ? items.slice(0, visibleRows) : items;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)("ul", { className: '-my-2 flex flex-col divide-y divide-line', children: shown.map((item) => ((0, jsx_runtime_1.jsx)("li", { children: renderItem(item) }, getKey(item)))) }), isCapped ? ((0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { className: 'self-start', onClick: () => setIsExpanded(true), size: 'compact', variant: 'ghost', children: showAllLabel })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)("ul", { className: '-my-2 flex flex-col divide-y divide-line', children: shown.map((item) => ((0, jsx_runtime_1.jsx)("li", { children: renderItem(item) }, getKey(item)))) }), isCapped ? ((0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { className: 'self-start', onClick: () => setIsExpanded(true), size: 'compact', variant: 'surface', children: showAllLabel })) : null] }));
 };
 exports.PsCappedList = PsCappedList;

package/dist/components/ps-detail-pane.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export interface PsDetailPaneProps {
+    children: ReactNode;
+    className?: string;
+    footer?: ReactNode;
+    footerStart?: ReactNode;
+    headerActions?: ReactNode;
+    subtitle?: ReactNode;
+    title: string;
+}
+export declare const PsDetailPane: ({ children, className, footer, footerStart, headerActions, subtitle, title, }: PsDetailPaneProps) => import("react").JSX.Element;

package/dist/components/ps-detail-pane.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDetailPane = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsDetailPane = ({ children, className, footer, footerStart, headerActions, subtitle, title, }) => ((0, jsx_runtime_1.jsxs)("section", { "aria-label": title, className: ps_design_system_1.PallasoftClassNameService.merge('ps-card flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-ps-card', className), children: [(0, jsx_runtime_1.jsxs)("header", { className: 'flex shrink-0 items-start justify-between gap-3 border-b border-line/80 px-4 py-3.5 sm:px-5', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-col gap-0.5', children: [(0, jsx_runtime_1.jsx)("h2", { className: 'truncate text-lg font-semibold leading-tight text-ink', children: title }), subtitle ? (0, jsx_runtime_1.jsx)("p", { className: 'truncate text-xs text-ink/55', children: subtitle }) : null] }), headerActions ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2', children: headerActions })) : null] }), (0, jsx_runtime_1.jsx)("div", { className: 'ps-scrollbar-hidden min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5', children: children }), footer || footerStart ? ((0, jsx_runtime_1.jsxs)("footer", { className: 'flex shrink-0 flex-wrap items-center justify-between gap-2 border-t border-line/80 px-4 py-3 sm:px-5', children: [footerStart ? (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 items-center gap-2', children: footerStart }) : null, (0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex flex-wrap items-center justify-end gap-2', children: footer })] })) : null] }));
+exports.PsDetailPane = PsDetailPane;

package/dist/components/ps-document-row.d.ts

@@ -5,6 +5,7 @@ export interface PsDocumentRowProps {
     badges?: ReactNode;
     className?: string;
     date?: string;
+    isActive?: boolean;
     isSelected?: boolean;
     note?: ReactNode;
     onOpen?: () => void;
@@ -16,4 +17,4 @@ export interface PsDocumentRowProps {
     thumbnailSrc?: string | null;
     title: string;
 }
-export declare const PsDocumentRow: ({ actions, amount, badges, className, date, isSelected, note, onOpen, onPrefetch, select, subtitle, thumbnailAlt, thumbnailFallback, thumbnailSrc, title, }: PsDocumentRowProps) => import("react").JSX.Element;
+export declare const PsDocumentRow: ({ actions, amount, badges, className, date, isActive, isSelected, note, onOpen, onPrefetch, select, subtitle, thumbnailAlt, thumbnailFallback, thumbnailSrc, title, }: PsDocumentRowProps) => import("react").JSX.Element;

package/dist/components/ps-document-row.js

@@ -3,14 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsDocumentRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsDocumentRow = ({ actions, amount, badges, className, date, isSelected = false, note, onOpen, onPrefetch, select, subtitle, thumbnailAlt = '', thumbnailFallback, thumbnailSrc, title, }) => {
+const PsDocumentRow = ({ actions, amount, badges, className, date, isActive = false, isSelected = false, note, onOpen, onPrefetch, select, subtitle, thumbnailAlt = '', thumbnailFallback, thumbnailSrc, title, }) => {
     const Main = onOpen ? 'button' : 'div';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 border-b border-line/70 px-3 py-3 transition-colors last:border-b-0 sm:flex-nowrap', isSelected ? 'bg-primary/5' : 'hover:bg-mist/40', className), children: [select ? (0, jsx_runtime_1.jsx)("span", { className: 'flex shrink-0 items-center', children: select }) : null, (0, jsx_runtime_1.jsxs)(Main, { className: 'ps-focus-ring grid min-w-0 flex-1 basis-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3 gap-y-1 rounded-ps-control text-left sm:grid-cols-[auto_minmax(0,1fr)_auto]', ...(onOpen
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 border-b border-line/70 px-3 py-3 transition-colors last:border-b-0 sm:flex-nowrap', isActive
+            ? 'bg-primary/8 shadow-[inset_3px_0_0_rgb(var(--ps-color-primary-rgb))]'
+            : isSelected
+                ? 'bg-primary/5'
+                : 'hover:bg-mist/40', className), children: [select ? (0, jsx_runtime_1.jsx)("span", { className: 'flex shrink-0 items-center', children: select }) : null, (0, jsx_runtime_1.jsxs)(Main, { className: 'ps-focus-ring grid min-w-0 flex-1 basis-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3 gap-y-1 rounded-ps-control text-left sm:grid-cols-[auto_minmax(0,1fr)_auto]', ...(onOpen
                     ? {
-                        onClick: onOpen,
-                        onFocus: onPrefetch,
-                        onPointerEnter: onPrefetch,
-                        type: 'button',
+                        'aria-current': isActive ? 'true' : undefined,
+                        'onClick': onOpen,
+                        'onFocus': onPrefetch,
+                        'onPointerEnter': onPrefetch,
+                        'type': 'button',
                     }
                     : {}), children: [(0, jsx_runtime_1.jsx)("span", { className: 'row-span-2 flex h-14 w-11 shrink-0 items-center justify-center overflow-hidden rounded-ps-control border border-line/60 bg-mist/40 sm:row-span-1', children: thumbnailSrc ? ((0, jsx_runtime_1.jsx)("img", { alt: thumbnailAlt, className: 'h-full w-full object-cover object-top', decoding: 'async', loading: 'lazy', src: thumbnailSrc })) : (thumbnailFallback) }), (0, jsx_runtime_1.jsxs)("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate text-sm font-semibold text-ink', children: title }), subtitle ? (0, jsx_runtime_1.jsx)("span", { className: 'truncate text-xs text-ink/55', children: subtitle }) : null, badges ? ((0, jsx_runtime_1.jsx)("span", { className: 'flex flex-wrap items-center gap-1.5 pt-1', children: badges })) : null, note ? ((0, jsx_runtime_1.jsx)("span", { className: 'line-clamp-2 break-words pt-0.5 text-xs text-ink/70', children: note })) : null] }), amount || date ? ((0, jsx_runtime_1.jsxs)("span", { className: 'col-start-2 flex items-baseline gap-2 sm:col-start-3 sm:flex-col sm:items-end sm:gap-0.5', children: [amount ? ((0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-semibold tabular-nums text-ink', children: amount })) : null, date ? (0, jsx_runtime_1.jsx)("span", { className: 'text-xs tabular-nums text-ink/55', children: date }) : null] })) : null] }), actions ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full shrink-0 items-center justify-end gap-2 sm:w-auto', children: actions })) : null] }));
 };

package/dist/components/ps-form-footer.d.ts

@@ -1,10 +1,13 @@
+import type { ElementType } from 'react';
 export interface PsFormFooterProps {
     isSaving: boolean;
     isSecondaryVisible?: boolean;
     isSubmitDisabled: boolean;
-    onSecondary: () => void;
+    LinkComponent?: ElementType;
+    onSecondary?: () => void;
     savingLabel: string;
+    secondaryHref?: string;
     secondaryLabel: string;
     submitLabel: string;
 }
-export declare const PsFormFooter: ({ isSaving, isSecondaryVisible, isSubmitDisabled, onSecondary, savingLabel, secondaryLabel, submitLabel, }: PsFormFooterProps) => import("react").JSX.Element;
+export declare const PsFormFooter: ({ isSaving, isSecondaryVisible, isSubmitDisabled, LinkComponent, onSecondary, savingLabel, secondaryHref, secondaryLabel, submitLabel, }: PsFormFooterProps) => import("react").JSX.Element;

package/dist/components/ps-form-footer.js

@@ -3,5 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsFormFooter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_button_1 = require("./ps-button");
-const PsFormFooter = ({ isSaving, isSecondaryVisible = true, isSubmitDisabled, onSecondary, savingLabel, secondaryLabel, submitLabel, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'sticky bottom-0 z-docked -mx-4 flex justify-end gap-2 border-t border-line bg-surface/90 px-4 py-3 backdrop-blur sm:bottom-4 sm:mx-0 sm:border-0 sm:bg-transparent sm:px-0 sm:py-0 sm:backdrop-blur-none', children: [isSecondaryVisible ? ((0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { disabled: isSaving, onClick: onSecondary, type: 'button', variant: 'surface', children: secondaryLabel })) : null, (0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { disabled: isSubmitDisabled || isSaving, isLoading: isSaving, loadingLabel: savingLabel, type: 'submit', variant: 'primary', children: submitLabel })] }));
+const ps_link_button_1 = require("./ps-link-button");
+const PsFormFooter = ({ isSaving, isSecondaryVisible = true, isSubmitDisabled, LinkComponent, onSecondary, savingLabel, secondaryHref, secondaryLabel, submitLabel, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'sticky bottom-0 z-docked -mx-4 flex justify-end gap-2 border-t border-line bg-surface/90 px-4 py-3 backdrop-blur sm:bottom-4 sm:mx-0 sm:border-0 sm:bg-transparent sm:px-0 sm:py-0 sm:backdrop-blur-none', children: [!isSecondaryVisible ? null : secondaryHref === undefined ? ((0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { disabled: isSaving, onClick: onSecondary, type: 'button', variant: 'surface', children: secondaryLabel })) : ((0, jsx_runtime_1.jsx)(ps_link_button_1.PsLinkButton, { href: secondaryHref, LinkComponent: LinkComponent, variant: 'surface', children: secondaryLabel })), (0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { disabled: isSubmitDisabled || isSaving, isLoading: isSaving, loadingLabel: savingLabel, type: 'submit', variant: 'primary', children: submitLabel })] }));
 exports.PsFormFooter = PsFormFooter;

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

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react';
 export interface PsPageSkeletonProps {
+    actions?: ReactNode;
     children: ReactNode;
     hasActions?: boolean;
     isNarrow?: boolean;
     loadingLabel: string;
     title?: string;
 }
-export declare const PsPageSkeleton: ({ children, hasActions, isNarrow, loadingLabel, title, }: PsPageSkeletonProps) => import("react").JSX.Element;
+export declare const PsPageSkeleton: ({ actions, children, hasActions, isNarrow, loadingLabel, title, }: PsPageSkeletonProps) => import("react").JSX.Element;

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

@@ -8,5 +8,5 @@ const ps_page_layout_1 = require("./ps-page-layout");
 const ps_page_stack_1 = require("./ps-page-stack");
 const ps_section_header_1 = require("./ps-section-header");
 const ps_skeleton_1 = require("./ps-skeleton");
-const PsPageSkeleton = ({ children, hasActions = false, isNarrow = false, loadingLabel, title, }) => ((0, jsx_runtime_1.jsx)(ps_page_layout_1.PsPageLayout, { isNarrow: isNarrow, children: (0, jsx_runtime_1.jsxs)(ps_page_stack_1.PsPageStack, { children: [title === undefined ? ((0, jsx_runtime_1.jsx)(ps_section_header_1.PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : ((0, jsx_runtime_1.jsx)(ps_page_header_1.PsPageHeader, { actions: hasActions ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button }) : undefined, title: title })), children] }) }));
+const PsPageSkeleton = ({ actions, children, hasActions = false, isNarrow = false, loadingLabel, title, }) => ((0, jsx_runtime_1.jsx)(ps_page_layout_1.PsPageLayout, { isNarrow: isNarrow, children: (0, jsx_runtime_1.jsxs)(ps_page_stack_1.PsPageStack, { children: [title === undefined ? ((0, jsx_runtime_1.jsx)(ps_section_header_1.PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : ((0, jsx_runtime_1.jsx)(ps_page_header_1.PsPageHeader, { actions: actions !== undefined ? (actions) : hasActions ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button })) : undefined, title: title })), children] }) }));
 exports.PsPageSkeleton = PsPageSkeleton;

package/dist/components/ps-split-view.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface PsSplitViewProps {
+    detail: ReactNode;
+    list: ReactNode;
+}
+export declare const PsSplitView: ({ detail, list }: PsSplitViewProps) => import("react").JSX.Element;

package/dist/components/ps-split-view.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSplitView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_ps_fill_height_1 = require("../hooks/use-ps-fill-height");
+const PsSplitView = ({ detail, list }) => {
+    const isSplit = detail !== null && detail !== undefined && detail !== false;
+    const { height, ref } = (0, use_ps_fill_height_1.usePsFillHeight)(isSplit);
+    if (!isSplit)
+        return (0, jsx_runtime_1.jsx)("div", { className: 'min-w-0', children: list });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0 xl:grid xl:h-[var(--ps-split-height,calc(100dvh-14rem))] xl:grid-cols-[minmax(0,1fr)_minmax(26rem,34rem)] xl:gap-4', ref: ref, style: height === null ? undefined : { '--ps-split-height': `${height}px` }, children: [(0, jsx_runtime_1.jsx)("div", { className: 'ps-scrollbar-hidden min-h-0 min-w-0 xl:overflow-y-auto', children: list }), (0, jsx_runtime_1.jsx)("div", { className: 'hidden min-h-0 min-w-0 xl:block', children: detail })] }));
+};
+exports.PsSplitView = PsSplitView;

package/dist/constants/ps-button-classes.js

@@ -9,14 +9,14 @@ exports.PsButtonSizeClassNames = {
 };
 exports.PsButtonVariantClassNames = {
     danger: 'border-danger bg-danger text-white enabled:hover:opacity-90',
-    ghost: 'border-transparent bg-transparent text-ink/60 enabled:hover:text-ink',
+    ghost: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
     primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] enabled:hover:border-primary-dark enabled:hover:bg-primary-dark',
     secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 enabled:hover:text-primary dark:border-white/16 dark:bg-white/12 dark:enabled:hover:text-white',
     surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
 };
 exports.PsLinkButtonVariantClassNames = {
     danger: 'border-danger bg-danger text-white hover:opacity-90',
-    ghost: 'border-transparent bg-transparent text-ink/60 hover:text-ink',
+    ghost: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
     primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] hover:border-primary-dark hover:bg-primary-dark',
     secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 hover:text-primary dark:border-white/16 dark:bg-white/12 dark:hover:text-white',
     surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',

package/dist/constants/ps-split-view-config.d.ts

@@ -0,0 +1,4 @@
+export declare const PsSplitViewConfig: {
+    readonly minHeight: 448;
+    readonly scrollableOverflow: RegExp;
+};

package/dist/constants/ps-split-view-config.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSplitViewConfig = void 0;
+exports.PsSplitViewConfig = {
+    minHeight: 448,
+    scrollableOverflow: /(auto|scroll)/,
+};

package/dist/esm/components/ps-action-tile-content.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsActionTileContent = ({ description, icon, label, variant, }) => (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'min-w-0', children: [_jsx("span", { className: 'block break-words', children: label }), description ? (_jsx("span", { className: PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? (_jsx("span", { className: PallasoftClassNameService.merge('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', variant === 'primary' ? 'bg-white/15 text-white' : 'ps-icon-surface'), children: icon })) : null] }));

package/dist/esm/components/ps-action-tile-link.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsActionTileContent } from './ps-action-tile-content.js';
+const variantClassNames = {
+    default: 'ps-action-tile',
+    primary: 'ps-action-tile ps-action-tile-primary',
+};
+export const PsActionTileLink = ({ className, description, href, icon, label, LinkComponent, variant = 'default', ...props }) => {
+    const linkClassName = PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className);
+    const content = (_jsx(PsActionTileContent, { description: description, icon: icon, label: label, variant: variant }));
+    return LinkComponent ? (_jsx(LinkComponent, { className: linkClassName, prefetch: 'intent', to: href, ...props, children: content })) : (_jsx("a", { className: linkClassName, href: href, ...props, children: content }));
+};

package/dist/esm/components/ps-action-tile.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
+import { PsActionTileContent } from './ps-action-tile-content.js';
 import { PsSkeleton } from './ps-skeleton.js';
 const variantClassNames = {
     default: 'ps-action-tile',
     primary: 'ps-action-tile ps-action-tile-primary',
 };
-export const PsActionTile = ({ className, description, icon, isLoading = false, label, type = 'button', variant = 'default', ...props }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-16', className), shape: PsSkeletonShape.Card })) : (_jsxs("button", { className: PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: [_jsxs("span", { className: 'min-w-0', children: [_jsx("span", { className: 'block break-words', children: label }), description ? (_jsx("span", { className: PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? (_jsx("span", { className: PallasoftClassNameService.merge('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', variant === 'primary' ? 'bg-white/15 text-white' : 'ps-icon-surface'), children: icon })) : null] }));
+export const PsActionTile = ({ className, description, icon, isLoading = false, label, type = 'button', variant = 'default', ...props }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-16', className), shape: PsSkeletonShape.Card })) : (_jsx("button", { className: PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: _jsx(PsActionTileContent, { description: description, icon: icon, label: label, variant: variant }) }));

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

@@ -6,5 +6,5 @@ export const PsCappedList = ({ getKey, items, renderItem, showAllLabel, visibleR
     const [isExpanded, setIsExpanded] = useState(false);
     const isCapped = !isExpanded && items.length > visibleRows;
     const shown = isCapped ? items.slice(0, visibleRows) : items;
-    return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx("ul", { className: '-my-2 flex flex-col divide-y divide-line', children: shown.map((item) => (_jsx("li", { children: renderItem(item) }, getKey(item)))) }), isCapped ? (_jsx(PsButton, { className: 'self-start', onClick: () => setIsExpanded(true), size: 'compact', variant: 'ghost', children: showAllLabel })) : null] }));
+    return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx("ul", { className: '-my-2 flex flex-col divide-y divide-line', children: shown.map((item) => (_jsx("li", { children: renderItem(item) }, getKey(item)))) }), isCapped ? (_jsx(PsButton, { className: 'self-start', onClick: () => setIsExpanded(true), size: 'compact', variant: 'surface', children: showAllLabel })) : null] }));
 };

package/dist/esm/components/ps-detail-pane.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 PsDetailPane = ({ children, className, footer, footerStart, headerActions, subtitle, title, }) => (_jsxs("section", { "aria-label": title, className: PallasoftClassNameService.merge('ps-card flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-ps-card', className), children: [_jsxs("header", { className: 'flex shrink-0 items-start justify-between gap-3 border-b border-line/80 px-4 py-3.5 sm:px-5', children: [_jsxs("div", { className: 'flex min-w-0 flex-col gap-0.5', children: [_jsx("h2", { className: 'truncate text-lg font-semibold leading-tight text-ink', children: title }), subtitle ? _jsx("p", { className: 'truncate text-xs text-ink/55', children: subtitle }) : null] }), headerActions ? (_jsx("div", { className: 'flex shrink-0 items-center gap-2', children: headerActions })) : null] }), _jsx("div", { className: 'ps-scrollbar-hidden min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5', children: children }), footer || footerStart ? (_jsxs("footer", { className: 'flex shrink-0 flex-wrap items-center justify-between gap-2 border-t border-line/80 px-4 py-3 sm:px-5', children: [footerStart ? _jsx("div", { className: 'flex min-w-0 items-center gap-2', children: footerStart }) : null, _jsx("div", { className: 'ml-auto flex flex-wrap items-center justify-end gap-2', children: footer })] })) : null] }));

package/dist/esm/components/ps-document-row.js

@@ -1,13 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsDocumentRow = ({ actions, amount, badges, className, date, isSelected = false, note, onOpen, onPrefetch, select, subtitle, thumbnailAlt = '', thumbnailFallback, thumbnailSrc, title, }) => {
+export const PsDocumentRow = ({ actions, amount, badges, className, date, isActive = false, isSelected = false, note, onOpen, onPrefetch, select, subtitle, thumbnailAlt = '', thumbnailFallback, thumbnailSrc, title, }) => {
     const Main = onOpen ? 'button' : 'div';
-    return (_jsxs("div", { className: PallasoftClassNameService.merge('flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 border-b border-line/70 px-3 py-3 transition-colors last:border-b-0 sm:flex-nowrap', isSelected ? 'bg-primary/5' : 'hover:bg-mist/40', className), children: [select ? _jsx("span", { className: 'flex shrink-0 items-center', children: select }) : null, _jsxs(Main, { className: 'ps-focus-ring grid min-w-0 flex-1 basis-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3 gap-y-1 rounded-ps-control text-left sm:grid-cols-[auto_minmax(0,1fr)_auto]', ...(onOpen
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 border-b border-line/70 px-3 py-3 transition-colors last:border-b-0 sm:flex-nowrap', isActive
+            ? 'bg-primary/8 shadow-[inset_3px_0_0_rgb(var(--ps-color-primary-rgb))]'
+            : isSelected
+                ? 'bg-primary/5'
+                : 'hover:bg-mist/40', className), children: [select ? _jsx("span", { className: 'flex shrink-0 items-center', children: select }) : null, _jsxs(Main, { className: 'ps-focus-ring grid min-w-0 flex-1 basis-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3 gap-y-1 rounded-ps-control text-left sm:grid-cols-[auto_minmax(0,1fr)_auto]', ...(onOpen
                     ? {
-                        onClick: onOpen,
-                        onFocus: onPrefetch,
-                        onPointerEnter: onPrefetch,
-                        type: 'button',
+                        'aria-current': isActive ? 'true' : undefined,
+                        'onClick': onOpen,
+                        'onFocus': onPrefetch,
+                        'onPointerEnter': onPrefetch,
+                        'type': 'button',
                     }
                     : {}), children: [_jsx("span", { className: 'row-span-2 flex h-14 w-11 shrink-0 items-center justify-center overflow-hidden rounded-ps-control border border-line/60 bg-mist/40 sm:row-span-1', children: thumbnailSrc ? (_jsx("img", { alt: thumbnailAlt, className: 'h-full w-full object-cover object-top', decoding: 'async', loading: 'lazy', src: thumbnailSrc })) : (thumbnailFallback) }), _jsxs("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [_jsx("span", { className: 'truncate text-sm font-semibold text-ink', children: title }), subtitle ? _jsx("span", { className: 'truncate text-xs text-ink/55', children: subtitle }) : null, badges ? (_jsx("span", { className: 'flex flex-wrap items-center gap-1.5 pt-1', children: badges })) : null, note ? (_jsx("span", { className: 'line-clamp-2 break-words pt-0.5 text-xs text-ink/70', children: note })) : null] }), amount || date ? (_jsxs("span", { className: 'col-start-2 flex items-baseline gap-2 sm:col-start-3 sm:flex-col sm:items-end sm:gap-0.5', children: [amount ? (_jsx("span", { className: 'text-sm font-semibold tabular-nums text-ink', children: amount })) : null, date ? _jsx("span", { className: 'text-xs tabular-nums text-ink/55', children: date }) : null] })) : null] }), actions ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end gap-2 sm:w-auto', children: actions })) : null] }));
 };

package/dist/esm/components/ps-form-footer.js

@@ -1,3 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsButton } from './ps-button.js';
-export const PsFormFooter = ({ isSaving, isSecondaryVisible = true, isSubmitDisabled, onSecondary, savingLabel, secondaryLabel, submitLabel, }) => (_jsxs("div", { className: 'sticky bottom-0 z-docked -mx-4 flex justify-end gap-2 border-t border-line bg-surface/90 px-4 py-3 backdrop-blur sm:bottom-4 sm:mx-0 sm:border-0 sm:bg-transparent sm:px-0 sm:py-0 sm:backdrop-blur-none', children: [isSecondaryVisible ? (_jsx(PsButton, { disabled: isSaving, onClick: onSecondary, type: 'button', variant: 'surface', children: secondaryLabel })) : null, _jsx(PsButton, { disabled: isSubmitDisabled || isSaving, isLoading: isSaving, loadingLabel: savingLabel, type: 'submit', variant: 'primary', children: submitLabel })] }));
+import { PsLinkButton } from './ps-link-button.js';
+export const PsFormFooter = ({ isSaving, isSecondaryVisible = true, isSubmitDisabled, LinkComponent, onSecondary, savingLabel, secondaryHref, secondaryLabel, submitLabel, }) => (_jsxs("div", { className: 'sticky bottom-0 z-docked -mx-4 flex justify-end gap-2 border-t border-line bg-surface/90 px-4 py-3 backdrop-blur sm:bottom-4 sm:mx-0 sm:border-0 sm:bg-transparent sm:px-0 sm:py-0 sm:backdrop-blur-none', children: [!isSecondaryVisible ? null : secondaryHref === undefined ? (_jsx(PsButton, { disabled: isSaving, onClick: onSecondary, type: 'button', variant: 'surface', children: secondaryLabel })) : (_jsx(PsLinkButton, { href: secondaryHref, LinkComponent: LinkComponent, variant: 'surface', children: secondaryLabel })), _jsx(PsButton, { disabled: isSubmitDisabled || isSaving, isLoading: isSaving, loadingLabel: savingLabel, type: 'submit', variant: 'primary', children: submitLabel })] }));

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

@@ -5,4 +5,4 @@ import { PsPageLayout } from './ps-page-layout.js';
 import { PsPageStack } from './ps-page-stack.js';
 import { PsSectionHeader } from './ps-section-header.js';
 import { PsSkeleton } from './ps-skeleton.js';
-export const PsPageSkeleton = ({ children, hasActions = false, isNarrow = false, loadingLabel, title, }) => (_jsx(PsPageLayout, { isNarrow: isNarrow, children: _jsxs(PsPageStack, { children: [title === undefined ? (_jsx(PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : (_jsx(PsPageHeader, { actions: hasActions ? _jsx(PsSkeleton, { shape: PsSkeletonShape.Button }) : undefined, title: title })), children] }) }));
+export const PsPageSkeleton = ({ actions, children, hasActions = false, isNarrow = false, loadingLabel, title, }) => (_jsx(PsPageLayout, { isNarrow: isNarrow, children: _jsxs(PsPageStack, { children: [title === undefined ? (_jsx(PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : (_jsx(PsPageHeader, { actions: actions !== undefined ? (actions) : hasActions ? (_jsx(PsSkeleton, { shape: PsSkeletonShape.Button })) : undefined, title: title })), children] }) }));

package/dist/esm/components/ps-split-view.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePsFillHeight } from '../hooks/use-ps-fill-height.js';
+export const PsSplitView = ({ detail, list }) => {
+    const isSplit = detail !== null && detail !== undefined && detail !== false;
+    const { height, ref } = usePsFillHeight(isSplit);
+    if (!isSplit)
+        return _jsx("div", { className: 'min-w-0', children: list });
+    return (_jsxs("div", { className: 'min-w-0 xl:grid xl:h-[var(--ps-split-height,calc(100dvh-14rem))] xl:grid-cols-[minmax(0,1fr)_minmax(26rem,34rem)] xl:gap-4', ref: ref, style: height === null ? undefined : { '--ps-split-height': `${height}px` }, children: [_jsx("div", { className: 'ps-scrollbar-hidden min-h-0 min-w-0 xl:overflow-y-auto', children: list }), _jsx("div", { className: 'hidden min-h-0 min-w-0 xl:block', children: detail })] }));
+};

package/dist/esm/constants/ps-button-classes.js

@@ -6,14 +6,14 @@ export const PsButtonSizeClassNames = {
 };
 export const PsButtonVariantClassNames = {
     danger: 'border-danger bg-danger text-white enabled:hover:opacity-90',
-    ghost: 'border-transparent bg-transparent text-ink/60 enabled:hover:text-ink',
+    ghost: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
     primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] enabled:hover:border-primary-dark enabled:hover:bg-primary-dark',
     secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 enabled:hover:text-primary dark:border-white/16 dark:bg-white/12 dark:enabled:hover:text-white',
     surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
 };
 export const PsLinkButtonVariantClassNames = {
     danger: 'border-danger bg-danger text-white hover:opacity-90',
-    ghost: 'border-transparent bg-transparent text-ink/60 hover:text-ink',
+    ghost: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
     primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] hover:border-primary-dark hover:bg-primary-dark',
     secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 hover:text-primary dark:border-white/16 dark:bg-white/12 dark:hover:text-white',
     surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',

package/dist/esm/constants/ps-split-view-config.js

@@ -0,0 +1,4 @@
+export const PsSplitViewConfig = {
+    minHeight: 448,
+    scrollableOverflow: /(auto|scroll)/,
+};

package/dist/esm/hooks/use-ps-fill-height.js

@@ -0,0 +1,20 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import { PsFillHeightService } from '../services/ps-fill-height-service.js';
+export const usePsFillHeight = (isActive) => {
+    const ref = useRef(null);
+    const [height, setHeight] = useState(null);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!isActive || element === null)
+            return;
+        const scroller = PsFillHeightService.scroller(element);
+        const measure = () => setHeight(PsFillHeightService.height(element, scroller));
+        const observer = new ResizeObserver(measure);
+        measure();
+        observer.observe(scroller);
+        if (element.parentElement !== null)
+            observer.observe(element.parentElement);
+        return () => observer.disconnect();
+    }, [isActive]);
+    return { height, ref };
+};

package/dist/esm/hooks/use-ps-tab-channel.js

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useRef } from 'react';
+export const usePsTabChannel = (name, onMessage) => {
+    const channel = useRef(null);
+    const latest = useRef(onMessage);
+    latest.current = onMessage;
+    useEffect(() => {
+        if (typeof BroadcastChannel === 'undefined')
+            return;
+        const opened = new BroadcastChannel(name);
+        opened.onmessage = (event) => latest.current(event.data);
+        channel.current = opened;
+        return () => {
+            channel.current = null;
+            opened.close();
+        };
+    }, [name]);
+    return useCallback((message) => {
+        if (channel.current !== null)
+            channel.current.postMessage(message);
+    }, []);
+};

package/dist/esm/index.js

@@ -1,6 +1,7 @@
 export * from './components/ps-layer.js';
 export * from './components/ps-accordion.js';
 export * from './components/ps-action-tile.js';
+export * from './components/ps-action-tile-link.js';
 export * from './components/ps-audio-spectrum.js';
 export * from './constants/ps-audio-spectrum-config.js';
 export * from './components/ps-badge.js';
@@ -58,6 +59,7 @@ export * from './hooks/use-ps-audio-spectrum.js';
 export * from './hooks/use-ps-exit-snapshot.js';
 export * from './hooks/use-ps-exit-transition.js';
 export * from './hooks/use-ps-restore-focus.js';
+export * from './hooks/use-ps-tab-channel.js';
 export * from './hooks/use-ps-scroll-lock.js';
 export * from './hooks/use-ps-hide-on-scroll.js';
 export * from './hooks/use-ps-invisible-recaptcha.js';
@@ -68,6 +70,7 @@ export * from './hooks/use-ps-element-size.js';
 export * from './hooks/use-ps-hydrated.js';
 export * from './hooks/use-ps-viewport.js';
 export * from './hooks/use-ps-media-query.js';
+export * from './hooks/use-ps-fill-height.js';
 export * from './interfaces/ps-component-props.js';
 export * from './models/ps-element-size.js';
 export * from './models/ps-voice-orb.js';
@@ -152,6 +155,8 @@ export * from './models/ps-theme-mode-state.js';
 export * from './models/ps-tool-card-data.js';
 export * from './components/ps-capped-list.js';
 export * from './components/ps-detail-list.js';
+export * from './components/ps-detail-pane.js';
+export * from './components/ps-split-view.js';
 export * from './components/ps-overview-card.js';
 export * from './components/ps-form-footer.js';
 export * from './components/ps-start-highlight.js';

package/dist/esm/services/ps-fill-height-service.js

@@ -0,0 +1,33 @@
+import { PsSplitViewConfig } from '../constants/ps-split-view-config.js';
+export class PsFillHeightService {
+    static scroller(element) {
+        let parent = element.parentElement;
+        while (parent !== null) {
+            if (PsSplitViewConfig.scrollableOverflow.test(getComputedStyle(parent).overflowY))
+                return parent;
+            parent = parent.parentElement;
+        }
+        return document.documentElement;
+    }
+    static height(element, scroller) {
+        const isPage = scroller === document.documentElement;
+        const frameTop = isPage ? 0 : scroller.getBoundingClientRect().top;
+        const frameHeight = isPage ? window.innerHeight : scroller.clientHeight;
+        const scrolled = isPage ? window.scrollY : scroller.scrollTop;
+        const box = element.getBoundingClientRect();
+        const top = box.top - frameTop + scrolled;
+        const below = PsFillHeightService.below(element, scroller);
+        return Math.max(PsSplitViewConfig.minHeight, Math.floor(frameHeight - top - below));
+    }
+    static below(element, scroller) {
+        let node = element;
+        let parent = element.parentElement;
+        let total = parseFloat(getComputedStyle(scroller).paddingBottom);
+        while (parent !== null && parent !== scroller && parent !== document.body) {
+            total += Math.max(0, parent.getBoundingClientRect().bottom - node.getBoundingClientRect().bottom);
+            node = parent;
+            parent = parent.parentElement;
+        }
+        return total;
+    }
+}

package/dist/hooks/use-ps-fill-height.d.ts

@@ -0,0 +1,4 @@
+export declare const usePsFillHeight: <Element extends HTMLElement>(isActive: boolean) => {
+    height: number | null;
+    ref: import("react").RefObject<Element>;
+};

package/dist/hooks/use-ps-fill-height.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsFillHeight = void 0;
+const react_1 = require("react");
+const ps_fill_height_service_1 = require("../services/ps-fill-height-service");
+const usePsFillHeight = (isActive) => {
+    const ref = (0, react_1.useRef)(null);
+    const [height, setHeight] = (0, react_1.useState)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const element = ref.current;
+        if (!isActive || element === null)
+            return;
+        const scroller = ps_fill_height_service_1.PsFillHeightService.scroller(element);
+        const measure = () => setHeight(ps_fill_height_service_1.PsFillHeightService.height(element, scroller));
+        const observer = new ResizeObserver(measure);
+        measure();
+        observer.observe(scroller);
+        if (element.parentElement !== null)
+            observer.observe(element.parentElement);
+        return () => observer.disconnect();
+    }, [isActive]);
+    return { height, ref };
+};
+exports.usePsFillHeight = usePsFillHeight;

package/dist/hooks/use-ps-tab-channel.d.ts

@@ -0,0 +1 @@
+export declare const usePsTabChannel: <Message>(name: string, onMessage: (message: Message) => void) => ((message: Message) => void);

package/dist/hooks/use-ps-tab-channel.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsTabChannel = void 0;
+const react_1 = require("react");
+const usePsTabChannel = (name, onMessage) => {
+    const channel = (0, react_1.useRef)(null);
+    const latest = (0, react_1.useRef)(onMessage);
+    latest.current = onMessage;
+    (0, react_1.useEffect)(() => {
+        if (typeof BroadcastChannel === 'undefined')
+            return;
+        const opened = new BroadcastChannel(name);
+        opened.onmessage = (event) => latest.current(event.data);
+        channel.current = opened;
+        return () => {
+            channel.current = null;
+            opened.close();
+        };
+    }, [name]);
+    return (0, react_1.useCallback)((message) => {
+        if (channel.current !== null)
+            channel.current.postMessage(message);
+    }, []);
+};
+exports.usePsTabChannel = usePsTabChannel;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/ps-layer';
 export * from './components/ps-accordion';
 export * from './components/ps-action-tile';
+export * from './components/ps-action-tile-link';
 export * from './components/ps-audio-spectrum';
 export * from './constants/ps-audio-spectrum-config';
 export * from './components/ps-badge';
@@ -58,6 +59,7 @@ export * from './hooks/use-ps-audio-spectrum';
 export * from './hooks/use-ps-exit-snapshot';
 export * from './hooks/use-ps-exit-transition';
 export * from './hooks/use-ps-restore-focus';
+export * from './hooks/use-ps-tab-channel';
 export * from './hooks/use-ps-scroll-lock';
 export * from './hooks/use-ps-hide-on-scroll';
 export * from './hooks/use-ps-invisible-recaptcha';
@@ -68,6 +70,7 @@ export * from './hooks/use-ps-element-size';
 export * from './hooks/use-ps-hydrated';
 export * from './hooks/use-ps-viewport';
 export * from './hooks/use-ps-media-query';
+export * from './hooks/use-ps-fill-height';
 export * from './interfaces/ps-component-props';
 export * from './models/ps-element-size';
 export * from './models/ps-voice-orb';
@@ -152,6 +155,8 @@ 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-detail-pane';
+export * from './components/ps-split-view';
 export * from './components/ps-overview-card';
 export * from './components/ps-form-footer';
 export * from './components/ps-start-highlight';

package/dist/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/ps-layer"), exports);
 __exportStar(require("./components/ps-accordion"), exports);
 __exportStar(require("./components/ps-action-tile"), exports);
+__exportStar(require("./components/ps-action-tile-link"), exports);
 __exportStar(require("./components/ps-audio-spectrum"), exports);
 __exportStar(require("./constants/ps-audio-spectrum-config"), exports);
 __exportStar(require("./components/ps-badge"), exports);
@@ -74,6 +75,7 @@ __exportStar(require("./hooks/use-ps-audio-spectrum"), exports);
 __exportStar(require("./hooks/use-ps-exit-snapshot"), exports);
 __exportStar(require("./hooks/use-ps-exit-transition"), exports);
 __exportStar(require("./hooks/use-ps-restore-focus"), exports);
+__exportStar(require("./hooks/use-ps-tab-channel"), exports);
 __exportStar(require("./hooks/use-ps-scroll-lock"), exports);
 __exportStar(require("./hooks/use-ps-hide-on-scroll"), exports);
 __exportStar(require("./hooks/use-ps-invisible-recaptcha"), exports);
@@ -84,6 +86,7 @@ __exportStar(require("./hooks/use-ps-element-size"), exports);
 __exportStar(require("./hooks/use-ps-hydrated"), exports);
 __exportStar(require("./hooks/use-ps-viewport"), exports);
 __exportStar(require("./hooks/use-ps-media-query"), exports);
+__exportStar(require("./hooks/use-ps-fill-height"), exports);
 __exportStar(require("./interfaces/ps-component-props"), exports);
 __exportStar(require("./models/ps-element-size"), exports);
 __exportStar(require("./models/ps-voice-orb"), exports);
@@ -168,6 +171,8 @@ __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-detail-pane"), exports);
+__exportStar(require("./components/ps-split-view"), exports);
 __exportStar(require("./components/ps-overview-card"), exports);
 __exportStar(require("./components/ps-form-footer"), exports);
 __exportStar(require("./components/ps-start-highlight"), exports);

package/dist/services/ps-fill-height-service.d.ts

@@ -0,0 +1,5 @@
+export declare class PsFillHeightService {
+    static scroller(element: HTMLElement): HTMLElement;
+    static height(element: HTMLElement, scroller: HTMLElement): number;
+    private static below;
+}

package/dist/services/ps-fill-height-service.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFillHeightService = void 0;
+const ps_split_view_config_1 = require("../constants/ps-split-view-config");
+class PsFillHeightService {
+    static scroller(element) {
+        let parent = element.parentElement;
+        while (parent !== null) {
+            if (ps_split_view_config_1.PsSplitViewConfig.scrollableOverflow.test(getComputedStyle(parent).overflowY))
+                return parent;
+            parent = parent.parentElement;
+        }
+        return document.documentElement;
+    }
+    static height(element, scroller) {
+        const isPage = scroller === document.documentElement;
+        const frameTop = isPage ? 0 : scroller.getBoundingClientRect().top;
+        const frameHeight = isPage ? window.innerHeight : scroller.clientHeight;
+        const scrolled = isPage ? window.scrollY : scroller.scrollTop;
+        const box = element.getBoundingClientRect();
+        const top = box.top - frameTop + scrolled;
+        const below = PsFillHeightService.below(element, scroller);
+        return Math.max(ps_split_view_config_1.PsSplitViewConfig.minHeight, Math.floor(frameHeight - top - below));
+    }
+    static below(element, scroller) {
+        let node = element;
+        let parent = element.parentElement;
+        let total = parseFloat(getComputedStyle(scroller).paddingBottom);
+        while (parent !== null && parent !== scroller && parent !== document.body) {
+            total += Math.max(0, parent.getBoundingClientRect().bottom - node.getBoundingClientRect().bottom);
+            node = parent;
+            parent = parent.parentElement;
+        }
+        return total;
+    }
+}
+exports.PsFillHeightService = PsFillHeightService;

package/package.json

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