@pallasoft/ps-core-components 2.51.0 → 2.52.0

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

@@ -3,5 +3,5 @@ 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] }));
+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-muted'), 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-detail-list.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const PsDetailList = ({ emptyLabel, items }) => {
     const filled = items.filter((item) => item.value !== null && item.value !== '');
     if (filled.length === 0)
-        return (0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/50', children: emptyLabel });
-    return ((0, jsx_runtime_1.jsx)("dl", { className: 'grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-x-6 gap-y-3', children: filled.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("dt", { className: 'text-xs font-medium text-ink/50', children: item.label }), (0, jsx_runtime_1.jsx)("dd", { className: 'mt-0.5 text-sm break-words whitespace-pre-line text-ink', children: item.value })] }, item.label))) }));
+        return (0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-muted', children: emptyLabel });
+    return ((0, jsx_runtime_1.jsx)("dl", { className: 'grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-x-6 gap-y-3', children: filled.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("dt", { className: 'text-xs font-medium text-muted', children: item.label }), (0, jsx_runtime_1.jsx)("dd", { className: 'mt-0.5 text-sm break-words whitespace-pre-line text-ink', children: item.value })] }, item.label))) }));
 };
 exports.PsDetailList = PsDetailList;

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

@@ -3,5 +3,5 @@ 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] }));
+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-muted', 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-divider.js

@@ -7,6 +7,6 @@ const PsDivider = ({ className = '', label, orientation = 'horizontal', }) => {
         return ((0, jsx_runtime_1.jsx)("div", { "aria-orientation": 'vertical', className: `w-px shrink-0 self-stretch bg-line ${className}`, role: 'separator' }));
     if (!label)
         return ((0, jsx_runtime_1.jsx)("div", { "aria-orientation": 'horizontal', className: `h-px w-full shrink-0 bg-line ${className}`, role: 'separator' }));
-    return ((0, jsx_runtime_1.jsxs)("div", { "aria-label": label, "aria-orientation": 'horizontal', className: `flex w-full items-center gap-3 ${className}`, role: 'separator', children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'text-xs text-ink/55', children: label }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { "aria-label": label, "aria-orientation": 'horizontal', className: `flex w-full items-center gap-3 ${className}`, role: 'separator', children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'text-xs text-muted', children: label }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' })] }));
 };
 exports.PsDivider = PsDivider;

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

@@ -17,6 +17,6 @@ const PsDocumentRow = ({ actions, amount, badges, className, date, isActive = fa
                         '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] }));
+                    : {}), 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-muted', 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-muted', 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] }));
 };
 exports.PsDocumentRow = PsDocumentRow;

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

@@ -21,7 +21,7 @@ const PsEmptyState = ({ actions = [], badge, children, className, detail, descri
                     ? 'flex flex-col items-center gap-3'
                     : 'flex flex-col gap-5 sm:flex-row sm:items-start', children: [icon ? (0, jsx_runtime_1.jsx)("div", { className: 'ps-icon-surface h-14 w-14', children: icon }) : null, (0, jsx_runtime_1.jsxs)("div", { className: isInline ? 'min-w-0' : 'min-w-0 flex-1', children: [(0, jsx_runtime_1.jsxs)("div", { className: isInline
                                     ? 'flex flex-wrap items-center justify-center gap-2'
-                                    : 'flex flex-wrap items-center gap-2', children: [eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-primary', children: eyebrow })) : null, eyebrow && badge ? (0, jsx_runtime_1.jsx)("span", { className: 'h-1 w-1 rounded-full bg-line' }) : null, badge ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-ink/40', children: badge })) : null] }), (0, jsx_runtime_1.jsx)(Heading, { className: isInline
+                                    : 'flex flex-wrap items-center gap-2', children: [eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-primary', children: eyebrow })) : null, eyebrow && badge ? (0, jsx_runtime_1.jsx)("span", { className: 'h-1 w-1 rounded-full bg-line' }) : null, badge ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-subtle', children: badge })) : null] }), (0, jsx_runtime_1.jsx)(Heading, { className: isInline
                                     ? 'text-base font-semibold text-ink'
                                     : 'mt-3 text-3xl font-semibold tracking-tight sm:text-4xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: isInline
                                     ? 'mt-1.5 text-sm leading-6 text-ink/60'

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

@@ -1,3 +1,4 @@
+import type { PsPageWidth } from '../constants/ps-page-width';
 export interface PsFormPageSkeletonProps {
     hasActions?: boolean;
     hasBackLink?: boolean;
@@ -5,5 +6,6 @@ export interface PsFormPageSkeletonProps {
     loadingLabel: string;
     title?: string;
     variant?: 'bordered' | 'card' | 'plain';
+    width?: PsPageWidth;
 }
-export declare const PsFormPageSkeleton: ({ hasActions, hasBackLink, isNarrow, loadingLabel, title, variant, }: PsFormPageSkeletonProps) => import("react").JSX.Element;
+export declare const PsFormPageSkeleton: ({ hasActions, hasBackLink, isNarrow, loadingLabel, title, variant, width, }: PsFormPageSkeletonProps) => import("react").JSX.Element;

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

@@ -6,5 +6,5 @@ const ps_page_skeleton_config_1 = require("../constants/ps-page-skeleton-config"
 const ps_form_fields_skeleton_1 = require("./ps-form-fields-skeleton");
 const ps_page_skeleton_1 = require("./ps-page-skeleton");
 const ps_section_panel_skeleton_1 = require("./ps-section-panel-skeleton");
-const PsFormPageSkeleton = ({ hasActions = true, hasBackLink = false, isNarrow = false, loadingLabel, title, variant = 'plain', }) => ((0, jsx_runtime_1.jsx)(ps_page_skeleton_1.PsPageSkeleton, { hasActions: hasActions, hasBackLink: hasBackLink, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, children: ps_page_skeleton_config_1.PsPageSkeletonConfig.formSections.map((section) => ((0, jsx_runtime_1.jsx)(ps_section_panel_skeleton_1.PsSectionPanelSkeleton, { variant: variant, children: (0, jsx_runtime_1.jsx)(ps_form_fields_skeleton_1.PsFormFieldsSkeleton, {}) }, section))) }));
+const PsFormPageSkeleton = ({ hasActions = true, hasBackLink = false, isNarrow, loadingLabel, title, variant = 'plain', width, }) => ((0, jsx_runtime_1.jsx)(ps_page_skeleton_1.PsPageSkeleton, { hasActions: hasActions, hasBackLink: hasBackLink, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, width: width, children: ps_page_skeleton_config_1.PsPageSkeletonConfig.formSections.map((section) => ((0, jsx_runtime_1.jsx)(ps_section_panel_skeleton_1.PsSectionPanelSkeleton, { variant: variant, children: (0, jsx_runtime_1.jsx)(ps_form_fields_skeleton_1.PsFormFieldsSkeleton, {}) }, section))) }));
 exports.PsFormPageSkeleton = PsFormPageSkeleton;

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

@@ -1,7 +1,9 @@
 import type { ReactNode } from 'react';
+import type { PsPageWidth } from '../constants/ps-page-width';
 export interface PsPageLayoutProps {
     children: ReactNode;
     className?: string;
     isNarrow?: boolean;
+    width?: PsPageWidth;
 }
-export declare const PsPageLayout: ({ children, className, isNarrow }: PsPageLayoutProps) => import("react").JSX.Element;
+export declare const PsPageLayout: ({ children, className, isNarrow, width }: PsPageLayoutProps) => import("react").JSX.Element;

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

@@ -3,5 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsPageLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsPageLayout = ({ children, className, isNarrow = false }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full px-4 py-5 md:px-6 md:py-6', className), children: (0, jsx_runtime_1.jsx)("div", { className: isNarrow ? 'mx-auto flex w-full min-w-0 max-w-7xl flex-col' : 'flex min-w-0 flex-col', children: children }) }));
+const ps_page_width_class_names_1 = require("../constants/ps-page-width-class-names");
+const ps_page_width_service_1 = require("../services/ps-page-width-service");
+const PsPageLayout = ({ children, className, isNarrow, width }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full px-4 py-5 md:px-6 md:py-6', className), children: (0, jsx_runtime_1.jsx)("div", { className: ps_page_width_class_names_1.PsPageWidthClassNames[ps_page_width_service_1.PsPageWidthService.resolve(width, isNarrow)], children: children }) }));
 exports.PsPageLayout = PsPageLayout;

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { PsPageWidth } from '../constants/ps-page-width';
 export interface PsPageSkeletonProps {
     actions?: ReactNode;
     children: ReactNode;
@@ -7,5 +8,6 @@ export interface PsPageSkeletonProps {
     isNarrow?: boolean;
     loadingLabel: string;
     title?: string;
+    width?: PsPageWidth;
 }
-export declare const PsPageSkeleton: ({ actions, children, hasActions, hasBackLink, isNarrow, loadingLabel, title, }: PsPageSkeletonProps) => import("react").JSX.Element;
+export declare const PsPageSkeleton: ({ actions, children, hasActions, hasBackLink, isNarrow, loadingLabel, title, width, }: PsPageSkeletonProps) => import("react").JSX.Element;

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

@@ -8,8 +8,8 @@ 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 = ({ actions, children, hasActions = false, hasBackLink = false, isNarrow = false, loadingLabel, title, }) => {
+const PsPageSkeleton = ({ actions, children, hasActions = false, hasBackLink = false, isNarrow, loadingLabel, title, width, }) => {
     const backLink = hasBackLink ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-5 w-32' }) : undefined;
-    return ((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, leading: backLink, 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, leading: backLink, title: title })), children] }) }));
+    return ((0, jsx_runtime_1.jsx)(ps_page_layout_1.PsPageLayout, { isNarrow: isNarrow, width: width, 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, leading: backLink, 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, leading: backLink, title: title })), children] }) }));
 };
 exports.PsPageSkeleton = PsPageSkeleton;

package/dist/components/ps-section-header.js

@@ -5,5 +5,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
 const ps_skeleton_group_1 = require("./ps-skeleton-group");
-const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button }) : null] })) : ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button }) : null] })) : ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-muted', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
 exports.PsSectionHeader = PsSectionHeader;

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

@@ -2,10 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSplitView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_split_view_config_1 = require("../constants/ps-split-view-config");
 const use_ps_fill_height_1 = require("../hooks/use-ps-fill-height");
+const use_ps_media_query_1 = require("../hooks/use-ps-media-query");
+const use_ps_scroll_lock_1 = require("../hooks/use-ps-scroll-lock");
 const PsSplitView = ({ detail, list }) => {
     const isSplit = detail !== null && detail !== undefined && detail !== false;
     const { height, ref } = (0, use_ps_fill_height_1.usePsFillHeight)(isSplit);
+    const isWide = (0, use_ps_media_query_1.usePsMediaQuery)(ps_split_view_config_1.PsSplitViewConfig.wideQuery) === true;
+    (0, use_ps_scroll_lock_1.usePsScrollLock)(isSplit && isWide);
     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 })] }));

package/dist/components/ps-start-highlight-content.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PsStartHighlightContentProps {
+    description: string;
+    icon: ReactNode;
+    label: string;
+}
+export declare const PsStartHighlightContent: ({ description, icon, label, }: PsStartHighlightContentProps) => import("react").JSX.Element;

package/dist/components/ps-start-highlight-content.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStartHighlightContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsStartHighlightContent = ({ description, icon, label, }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary text-white', children: icon }), (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-base font-bold text-ink', title: label, children: label }), (0, jsx_runtime_1.jsx)("span", { className: 'text-sm leading-5 text-ink/60', children: description })] })] }));
+exports.PsStartHighlightContent = PsStartHighlightContent;

package/dist/components/ps-start-highlight-frame.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface PsStartHighlightFrameProps {
+    children: ReactNode;
+    title?: string;
+}
+export declare const PsStartHighlightFrame: ({ children, title }: PsStartHighlightFrameProps) => import("react").JSX.Element;

package/dist/components/ps-start-highlight-frame.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStartHighlightFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsStartHighlightFrame = ({ children, title }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [title === undefined ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'text-xs font-semibold uppercase tracking-wide text-subtle', children: title })), children] }));
+exports.PsStartHighlightFrame = PsStartHighlightFrame;

package/dist/components/ps-start-highlight-link.d.ts

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

package/dist/components/ps-start-highlight-link.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStartHighlightLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_start_highlight_class_name_1 = require("../constants/ps-start-highlight-class-name");
+const ps_start_highlight_content_1 = require("./ps-start-highlight-content");
+const ps_start_highlight_frame_1 = require("./ps-start-highlight-frame");
+const PsStartHighlightLink = ({ className, description, href, icon, label, LinkComponent, title, ...props }) => {
+    const linkClassName = ps_design_system_1.PallasoftClassNameService.merge(ps_start_highlight_class_name_1.PsStartHighlightClassName, className);
+    const content = (0, jsx_runtime_1.jsx)(ps_start_highlight_content_1.PsStartHighlightContent, { description: description, icon: icon, label: label });
+    return ((0, jsx_runtime_1.jsx)(ps_start_highlight_frame_1.PsStartHighlightFrame, { title: title, children: 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.PsStartHighlightLink = PsStartHighlightLink;

package/dist/components/ps-start-highlight.js

@@ -2,5 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsStartHighlight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const PsStartHighlight = ({ description, icon, label, onClick, title, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [title === undefined ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'text-xs font-semibold uppercase tracking-wide text-ink/40', children: title })), (0, jsx_runtime_1.jsxs)("button", { className: 'ps-focus-ring group flex items-center gap-4 rounded-2xl border border-primary/40 bg-gradient-to-br from-primary/20 via-primary/10 to-transparent p-4 text-left transition-colors hover:border-primary/70', onClick: onClick, type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary text-white', children: icon }), (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-base font-bold text-ink', title: label, children: label }), (0, jsx_runtime_1.jsx)("span", { className: 'text-sm leading-5 text-ink/60', children: description })] })] })] }));
+const ps_start_highlight_class_name_1 = require("../constants/ps-start-highlight-class-name");
+const ps_start_highlight_content_1 = require("./ps-start-highlight-content");
+const ps_start_highlight_frame_1 = require("./ps-start-highlight-frame");
+const PsStartHighlight = ({ description, icon, label, onClick, title, }) => ((0, jsx_runtime_1.jsx)(ps_start_highlight_frame_1.PsStartHighlightFrame, { title: title, children: (0, jsx_runtime_1.jsx)("button", { className: ps_start_highlight_class_name_1.PsStartHighlightClassName, onClick: onClick, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_start_highlight_content_1.PsStartHighlightContent, { description: description, icon: icon, label: label }) }) }));
 exports.PsStartHighlight = PsStartHighlight;

package/dist/components/ps-start-panel.js

@@ -5,5 +5,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_card_1 = require("./ps-card");
 const PsStartPanel = ({ actions, description, highlight, preview, steps, title, }) => ((0, jsx_runtime_1.jsx)(ps_card_1.PsCard, { density: 'spacious', children: (0, jsx_runtime_1.jsxs)("div", { className: preview
             ? 'grid items-center gap-10 xl:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]'
-            : 'grid items-center gap-10', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-7', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-3', children: [(0, jsx_runtime_1.jsx)("h2", { className: 'text-3xl font-extrabold leading-tight text-ink', children: title }), (0, jsx_runtime_1.jsx)("p", { className: 'max-w-md text-sm leading-6 text-ink/60', children: description })] }), highlight, steps === undefined ? null : ((0, jsx_runtime_1.jsx)("ol", { className: 'flex flex-col gap-4', children: steps.map((step, index) => ((0, jsx_runtime_1.jsxs)("li", { className: 'flex items-start gap-4', children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-line/60 text-sm font-bold text-ink/70', children: index + 1 }), (0, jsx_runtime_1.jsxs)("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-bold text-ink', children: step.title }), (0, jsx_runtime_1.jsx)("span", { className: 'text-sm leading-5 text-ink/55', children: step.description })] })] }, step.id))) })), actions] }), preview === undefined ? null : (0, jsx_runtime_1.jsx)("div", { className: 'relative hidden xl:block', children: preview })] }) }));
+            : 'grid items-center gap-10', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-7', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-3', children: [(0, jsx_runtime_1.jsx)("h2", { className: 'text-3xl font-extrabold leading-tight text-ink', children: title }), (0, jsx_runtime_1.jsx)("p", { className: 'max-w-md text-sm leading-6 text-ink/60', children: description })] }), highlight, steps === undefined ? null : ((0, jsx_runtime_1.jsx)("ol", { className: 'flex flex-col gap-4', children: steps.map((step, index) => ((0, jsx_runtime_1.jsxs)("li", { className: 'flex items-start gap-4', children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-line/60 text-sm font-bold text-ink/70', children: index + 1 }), (0, jsx_runtime_1.jsxs)("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-bold text-ink', children: step.title }), (0, jsx_runtime_1.jsx)("span", { className: 'text-sm leading-5 text-muted', children: step.description })] })] }, step.id))) })), actions] }), preview === undefined ? null : (0, jsx_runtime_1.jsx)("div", { className: 'relative hidden xl:block', children: preview })] }) }));
 exports.PsStartPanel = PsStartPanel;

package/dist/components/ps-start-preview.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsStartPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const PsStartPreview = ({ badge, children, note, title }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'rounded-2xl border border-line/60 bg-surface/60 p-5', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'mb-4 flex items-center justify-between', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-bold text-ink', children: title }), badge === undefined ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'rounded-ps-control border border-warning/40 px-2.5 py-1 text-xs font-semibold text-warning', children: badge }))] }), (0, jsx_runtime_1.jsx)("ul", { className: 'flex flex-col', children: children }), note === undefined ? null : ((0, jsx_runtime_1.jsx)("p", { className: 'mt-4 border-t border-line/40 pt-4 text-xs leading-5 text-ink/45', children: note }))] }));
+const PsStartPreview = ({ badge, children, note, title }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'rounded-2xl border border-line/60 bg-surface/60 p-5', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'mb-4 flex items-center justify-between', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-bold text-ink', children: title }), badge === undefined ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'rounded-ps-control border border-warning/40 px-2.5 py-1 text-xs font-semibold text-warning', children: badge }))] }), (0, jsx_runtime_1.jsx)("ul", { className: 'flex flex-col', children: children }), note === undefined ? null : ((0, jsx_runtime_1.jsx)("p", { className: 'mt-4 border-t border-line/40 pt-4 text-xs leading-5 text-subtle', children: note }))] }));
 exports.PsStartPreview = PsStartPreview;

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

@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_step_marker_class_names_1 = require("../constants/ps-step-marker-class-names");
 const ps_step_state_1 = require("../constants/ps-step-state");
 const PsStepList = ({ steps }) => ((0, jsx_runtime_1.jsx)("ol", { className: 'flex flex-col rounded-ps-panel border border-line bg-surface', children: steps.map((step, index) => ((0, jsx_runtime_1.jsxs)("li", { "aria-current": step.state === ps_step_state_1.PsStepState.current ? 'step' : undefined, className: 'relative flex gap-4 border-b border-line/70 px-5 py-4 last:border-0', children: [(0, jsx_runtime_1.jsx)("span", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold ${ps_step_marker_class_names_1.PsStepMarkerClassNames[step.state]}`, children: step.state === ps_step_state_1.PsStepState.done ? (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', children: "\u2713" }) : index + 1 }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 flex-col gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("h3", { className: step.state === ps_step_state_1.PsStepState.upcoming
-                                            ? 'text-sm font-semibold text-ink/50'
+                                            ? 'text-sm font-semibold text-muted'
                                             : 'text-sm font-semibold text-ink', children: step.title }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-0.5 text-sm text-ink/60', children: step.description })] }), step.actions ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 flex-wrap items-center gap-2', children: step.actions })) : null] }), step.content ? (0, jsx_runtime_1.jsx)("div", { className: 'min-w-0', children: step.content }) : null] })] }, step.id))) }));
 exports.PsStepList = PsStepList;

package/dist/components/ps-summary-bar.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSummaryBar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const PsSummaryBar = ({ items }) => ((0, jsx_runtime_1.jsx)("dl", { className: 'grid grid-cols-2 gap-x-6 gap-y-4 rounded-ps-panel border border-line bg-surface px-5 py-4 sm:flex sm:flex-wrap sm:items-center sm:gap-x-10', children: items.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-col gap-1', children: [(0, jsx_runtime_1.jsx)("dt", { className: 'text-xs font-medium uppercase tracking-wide text-ink/50', children: item.label }), (0, jsx_runtime_1.jsx)("dd", { className: item.emphasis
+const PsSummaryBar = ({ items }) => ((0, jsx_runtime_1.jsx)("dl", { className: 'grid grid-cols-2 gap-x-6 gap-y-4 rounded-ps-panel border border-line bg-surface px-5 py-4 sm:flex sm:flex-wrap sm:items-center sm:gap-x-10', children: items.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-col gap-1', children: [(0, jsx_runtime_1.jsx)("dt", { className: 'text-xs font-medium uppercase tracking-wide text-muted', children: item.label }), (0, jsx_runtime_1.jsx)("dd", { className: item.emphasis
                     ? 'truncate text-xl font-semibold tabular-nums text-ink'
                     : 'truncate text-sm font-medium text-ink', children: item.value })] }, item.label))) }));
 exports.PsSummaryBar = PsSummaryBar;

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

@@ -1,6 +1,8 @@
+import type { PsPageWidth } from '../constants/ps-page-width';
 export interface PsTablePageSkeletonProps {
     isNarrow?: boolean;
     loadingLabel: string;
     title?: string;
+    width?: PsPageWidth;
 }
-export declare const PsTablePageSkeleton: ({ isNarrow, loadingLabel, title, }: PsTablePageSkeletonProps) => import("react").JSX.Element;
+export declare const PsTablePageSkeleton: ({ isNarrow, loadingLabel, title, width, }: PsTablePageSkeletonProps) => import("react").JSX.Element;

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

@@ -4,5 +4,5 @@ exports.PsTablePageSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_page_skeleton_1 = require("./ps-page-skeleton");
 const ps_table_list_skeleton_1 = require("./ps-table-list-skeleton");
-const PsTablePageSkeleton = ({ isNarrow = false, loadingLabel, title, }) => ((0, jsx_runtime_1.jsx)(ps_page_skeleton_1.PsPageSkeleton, { hasActions: true, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, children: (0, jsx_runtime_1.jsx)(ps_table_list_skeleton_1.PsTableListSkeleton, {}) }));
+const PsTablePageSkeleton = ({ isNarrow, loadingLabel, title, width, }) => ((0, jsx_runtime_1.jsx)(ps_page_skeleton_1.PsPageSkeleton, { hasActions: true, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, width: width, children: (0, jsx_runtime_1.jsx)(ps_table_list_skeleton_1.PsTableListSkeleton, {}) }));
 exports.PsTablePageSkeleton = PsTablePageSkeleton;

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

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

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

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

package/dist/constants/ps-page-width-class-names.d.ts

@@ -0,0 +1,2 @@
+import { PsPageWidth } from './ps-page-width';
+export declare const PsPageWidthClassNames: Record<PsPageWidth, string>;

package/dist/constants/ps-page-width-class-names.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPageWidthClassNames = void 0;
+const ps_page_width_1 = require("./ps-page-width");
+exports.PsPageWidthClassNames = {
+    [ps_page_width_1.PsPageWidth.Form]: 'mx-auto flex w-full min-w-0 max-w-7xl flex-col',
+    [ps_page_width_1.PsPageWidth.List]: 'flex min-w-0 flex-col',
+    [ps_page_width_1.PsPageWidth.Record]: 'flex min-w-0 flex-col',
+    [ps_page_width_1.PsPageWidth.Settings]: 'mx-auto flex w-full min-w-0 max-w-7xl flex-col',
+};

package/dist/constants/ps-page-width.d.ts

@@ -0,0 +1,6 @@
+export declare enum PsPageWidth {
+    Form = "form",
+    List = "list",
+    Record = "record",
+    Settings = "settings"
+}

package/dist/constants/ps-page-width.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPageWidth = void 0;
+var PsPageWidth;
+(function (PsPageWidth) {
+    PsPageWidth["Form"] = "form";
+    PsPageWidth["List"] = "list";
+    PsPageWidth["Record"] = "record";
+    PsPageWidth["Settings"] = "settings";
+})(PsPageWidth || (exports.PsPageWidth = PsPageWidth = {}));

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

@@ -1,4 +1,5 @@
 export declare const PsSplitViewConfig: {
     readonly minHeight: 448;
     readonly scrollableOverflow: RegExp;
+    readonly wideQuery: "(min-width: 1280px)";
 };

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

@@ -4,4 +4,5 @@ exports.PsSplitViewConfig = void 0;
 exports.PsSplitViewConfig = {
     minHeight: 448,
     scrollableOverflow: /(auto|scroll)/,
+    wideQuery: '(min-width: 1280px)',
 };

package/dist/constants/ps-start-highlight-class-name.d.ts

@@ -0,0 +1 @@
+export declare const PsStartHighlightClassName = "ps-focus-ring group flex items-center gap-4 rounded-2xl border border-primary/40 bg-gradient-to-br from-primary/20 via-primary/10 to-transparent p-4 text-left transition-colors hover:border-primary/70";

package/dist/constants/ps-start-highlight-class-name.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStartHighlightClassName = void 0;
+exports.PsStartHighlightClassName = 'ps-focus-ring group flex items-center gap-4 rounded-2xl border border-primary/40 bg-gradient-to-br from-primary/20 via-primary/10 to-transparent p-4 text-left transition-colors hover:border-primary/70';

package/dist/constants/ps-step-marker-class-names.js

@@ -5,5 +5,5 @@ const ps_step_state_1 = require("./ps-step-state");
 exports.PsStepMarkerClassNames = {
     [ps_step_state_1.PsStepState.done]: 'border-success bg-success text-white',
     [ps_step_state_1.PsStepState.current]: 'border-primary bg-primary/10 text-primary',
-    [ps_step_state_1.PsStepState.upcoming]: 'border-line bg-surface text-ink/40',
+    [ps_step_state_1.PsStepState.upcoming]: 'border-line bg-surface text-subtle',
 };

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

@@ -1,3 +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] }));
+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-muted'), 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-detail-list.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PsDetailList = ({ emptyLabel, items }) => {
     const filled = items.filter((item) => item.value !== null && item.value !== '');
     if (filled.length === 0)
-        return _jsx("p", { className: 'text-sm text-ink/50', children: emptyLabel });
-    return (_jsx("dl", { className: 'grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-x-6 gap-y-3', children: filled.map((item) => (_jsxs("div", { className: 'min-w-0', children: [_jsx("dt", { className: 'text-xs font-medium text-ink/50', children: item.label }), _jsx("dd", { className: 'mt-0.5 text-sm break-words whitespace-pre-line text-ink', children: item.value })] }, item.label))) }));
+        return _jsx("p", { className: 'text-sm text-muted', children: emptyLabel });
+    return (_jsx("dl", { className: 'grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-x-6 gap-y-3', children: filled.map((item) => (_jsxs("div", { className: 'min-w-0', children: [_jsx("dt", { className: 'text-xs font-medium text-muted', children: item.label }), _jsx("dd", { className: 'mt-0.5 text-sm break-words whitespace-pre-line text-ink', children: item.value })] }, item.label))) }));
 };

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

@@ -1,3 +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] }));
+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-muted', 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-divider.js

@@ -4,5 +4,5 @@ export const PsDivider = ({ className = '', label, orientation = 'horizontal', }
         return (_jsx("div", { "aria-orientation": 'vertical', className: `w-px shrink-0 self-stretch bg-line ${className}`, role: 'separator' }));
     if (!label)
         return (_jsx("div", { "aria-orientation": 'horizontal', className: `h-px w-full shrink-0 bg-line ${className}`, role: 'separator' }));
-    return (_jsxs("div", { "aria-label": label, "aria-orientation": 'horizontal', className: `flex w-full items-center gap-3 ${className}`, role: 'separator', children: [_jsx("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' }), _jsx("span", { "aria-hidden": 'true', className: 'text-xs text-ink/55', children: label }), _jsx("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' })] }));
+    return (_jsxs("div", { "aria-label": label, "aria-orientation": 'horizontal', className: `flex w-full items-center gap-3 ${className}`, role: 'separator', children: [_jsx("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' }), _jsx("span", { "aria-hidden": 'true', className: 'text-xs text-muted', children: label }), _jsx("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' })] }));
 };

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

@@ -14,5 +14,5 @@ export const PsDocumentRow = ({ actions, amount, badges, className, date, isActi
                         '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] }));
+                    : {}), 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-muted', 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-muted', 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-empty-state.js

@@ -18,7 +18,7 @@ export const PsEmptyState = ({ actions = [], badge, children, className, detail,
                     ? 'flex flex-col items-center gap-3'
                     : 'flex flex-col gap-5 sm:flex-row sm:items-start', children: [icon ? _jsx("div", { className: 'ps-icon-surface h-14 w-14', children: icon }) : null, _jsxs("div", { className: isInline ? 'min-w-0' : 'min-w-0 flex-1', children: [_jsxs("div", { className: isInline
                                     ? 'flex flex-wrap items-center justify-center gap-2'
-                                    : 'flex flex-wrap items-center gap-2', children: [eyebrow ? (_jsx("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-primary', children: eyebrow })) : null, eyebrow && badge ? _jsx("span", { className: 'h-1 w-1 rounded-full bg-line' }) : null, badge ? (_jsx("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-ink/40', children: badge })) : null] }), _jsx(Heading, { className: isInline
+                                    : 'flex flex-wrap items-center gap-2', children: [eyebrow ? (_jsx("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-primary', children: eyebrow })) : null, eyebrow && badge ? _jsx("span", { className: 'h-1 w-1 rounded-full bg-line' }) : null, badge ? (_jsx("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-subtle', children: badge })) : null] }), _jsx(Heading, { className: isInline
                                     ? 'text-base font-semibold text-ink'
                                     : 'mt-3 text-3xl font-semibold tracking-tight sm:text-4xl', children: title }), description ? (_jsx("p", { className: isInline
                                     ? 'mt-1.5 text-sm leading-6 text-ink/60'

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

@@ -3,4 +3,4 @@ import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config.js';
 import { PsFormFieldsSkeleton } from './ps-form-fields-skeleton.js';
 import { PsPageSkeleton } from './ps-page-skeleton.js';
 import { PsSectionPanelSkeleton } from './ps-section-panel-skeleton.js';
-export const PsFormPageSkeleton = ({ hasActions = true, hasBackLink = false, isNarrow = false, loadingLabel, title, variant = 'plain', }) => (_jsx(PsPageSkeleton, { hasActions: hasActions, hasBackLink: hasBackLink, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, children: PsPageSkeletonConfig.formSections.map((section) => (_jsx(PsSectionPanelSkeleton, { variant: variant, children: _jsx(PsFormFieldsSkeleton, {}) }, section))) }));
+export const PsFormPageSkeleton = ({ hasActions = true, hasBackLink = false, isNarrow, loadingLabel, title, variant = 'plain', width, }) => (_jsx(PsPageSkeleton, { hasActions: hasActions, hasBackLink: hasBackLink, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, width: width, children: PsPageSkeletonConfig.formSections.map((section) => (_jsx(PsSectionPanelSkeleton, { variant: variant, children: _jsx(PsFormFieldsSkeleton, {}) }, section))) }));

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

@@ -1,3 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsPageLayout = ({ children, className, isNarrow = false }) => (_jsx("div", { className: PallasoftClassNameService.merge('w-full px-4 py-5 md:px-6 md:py-6', className), children: _jsx("div", { className: isNarrow ? 'mx-auto flex w-full min-w-0 max-w-7xl flex-col' : 'flex min-w-0 flex-col', children: children }) }));
+import { PsPageWidthClassNames } from '../constants/ps-page-width-class-names.js';
+import { PsPageWidthService } from '../services/ps-page-width-service.js';
+export const PsPageLayout = ({ children, className, isNarrow, width }) => (_jsx("div", { className: PallasoftClassNameService.merge('w-full px-4 py-5 md:px-6 md:py-6', className), children: _jsx("div", { className: PsPageWidthClassNames[PsPageWidthService.resolve(width, isNarrow)], children: children }) }));

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

@@ -5,7 +5,7 @@ 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 = ({ actions, children, hasActions = false, hasBackLink = false, isNarrow = false, loadingLabel, title, }) => {
+export const PsPageSkeleton = ({ actions, children, hasActions = false, hasBackLink = false, isNarrow, loadingLabel, title, width, }) => {
     const backLink = hasBackLink ? _jsx(PsSkeleton, { className: 'h-5 w-32' }) : undefined;
-    return (_jsx(PsPageLayout, { isNarrow: isNarrow, children: _jsxs(PsPageStack, { children: [title === undefined ? (_jsx(PsSectionHeader, { isLoading: true, leading: backLink, title: loadingLabel, trailing: hasActions })) : (_jsx(PsPageHeader, { actions: actions !== undefined ? (actions) : hasActions ? (_jsx(PsSkeleton, { shape: PsSkeletonShape.Button })) : undefined, leading: backLink, title: title })), children] }) }));
+    return (_jsx(PsPageLayout, { isNarrow: isNarrow, width: width, children: _jsxs(PsPageStack, { children: [title === undefined ? (_jsx(PsSectionHeader, { isLoading: true, leading: backLink, title: loadingLabel, trailing: hasActions })) : (_jsx(PsPageHeader, { actions: actions !== undefined ? (actions) : hasActions ? (_jsx(PsSkeleton, { shape: PsSkeletonShape.Button })) : undefined, leading: backLink, title: title })), children] }) }));
 };

package/dist/esm/components/ps-section-header.js

@@ -2,4 +2,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
 import { PsSkeleton } from './ps-skeleton.js';
 import { PsSkeletonGroup } from './ps-skeleton-group.js';
-export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { shape: PsSkeletonShape.Button }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { shape: PsSkeletonShape.Button }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-muted', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));

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

@@ -1,8 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsSplitViewConfig } from '../constants/ps-split-view-config.js';
 import { usePsFillHeight } from '../hooks/use-ps-fill-height.js';
+import { usePsMediaQuery } from '../hooks/use-ps-media-query.js';
+import { usePsScrollLock } from '../hooks/use-ps-scroll-lock.js';
 export const PsSplitView = ({ detail, list }) => {
     const isSplit = detail !== null && detail !== undefined && detail !== false;
     const { height, ref } = usePsFillHeight(isSplit);
+    const isWide = usePsMediaQuery(PsSplitViewConfig.wideQuery) === true;
+    usePsScrollLock(isSplit && isWide);
     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/components/ps-start-highlight-content.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const PsStartHighlightContent = ({ description, icon, label, }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: 'flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary text-white', children: icon }), _jsxs("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [_jsx("span", { className: 'truncate text-base font-bold text-ink', title: label, children: label }), _jsx("span", { className: 'text-sm leading-5 text-ink/60', children: description })] })] }));

package/dist/esm/components/ps-start-highlight-frame.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsStartHighlightFrame = ({ children, title }) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [title === undefined ? null : (_jsx("span", { className: 'text-xs font-semibold uppercase tracking-wide text-subtle', children: title })), children] }));

package/dist/esm/components/ps-start-highlight-link.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsStartHighlightClassName } from '../constants/ps-start-highlight-class-name.js';
+import { PsStartHighlightContent } from './ps-start-highlight-content.js';
+import { PsStartHighlightFrame } from './ps-start-highlight-frame.js';
+export const PsStartHighlightLink = ({ className, description, href, icon, label, LinkComponent, title, ...props }) => {
+    const linkClassName = PallasoftClassNameService.merge(PsStartHighlightClassName, className);
+    const content = _jsx(PsStartHighlightContent, { description: description, icon: icon, label: label });
+    return (_jsx(PsStartHighlightFrame, { title: title, children: 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-start-highlight.js

@@ -1,2 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PsStartHighlight = ({ description, icon, label, onClick, title, }) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [title === undefined ? null : (_jsx("span", { className: 'text-xs font-semibold uppercase tracking-wide text-ink/40', children: title })), _jsxs("button", { className: 'ps-focus-ring group flex items-center gap-4 rounded-2xl border border-primary/40 bg-gradient-to-br from-primary/20 via-primary/10 to-transparent p-4 text-left transition-colors hover:border-primary/70', onClick: onClick, type: 'button', children: [_jsx("span", { className: 'flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary text-white', children: icon }), _jsxs("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [_jsx("span", { className: 'truncate text-base font-bold text-ink', title: label, children: label }), _jsx("span", { className: 'text-sm leading-5 text-ink/60', children: description })] })] })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsStartHighlightClassName } from '../constants/ps-start-highlight-class-name.js';
+import { PsStartHighlightContent } from './ps-start-highlight-content.js';
+import { PsStartHighlightFrame } from './ps-start-highlight-frame.js';
+export const PsStartHighlight = ({ description, icon, label, onClick, title, }) => (_jsx(PsStartHighlightFrame, { title: title, children: _jsx("button", { className: PsStartHighlightClassName, onClick: onClick, type: 'button', children: _jsx(PsStartHighlightContent, { description: description, icon: icon, label: label }) }) }));

package/dist/esm/components/ps-start-panel.js

@@ -2,4 +2,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsCard } from './ps-card.js';
 export const PsStartPanel = ({ actions, description, highlight, preview, steps, title, }) => (_jsx(PsCard, { density: 'spacious', children: _jsxs("div", { className: preview
             ? 'grid items-center gap-10 xl:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]'
-            : 'grid items-center gap-10', children: [_jsxs("div", { className: 'flex flex-col gap-7', children: [_jsxs("div", { className: 'flex flex-col gap-3', children: [_jsx("h2", { className: 'text-3xl font-extrabold leading-tight text-ink', children: title }), _jsx("p", { className: 'max-w-md text-sm leading-6 text-ink/60', children: description })] }), highlight, steps === undefined ? null : (_jsx("ol", { className: 'flex flex-col gap-4', children: steps.map((step, index) => (_jsxs("li", { className: 'flex items-start gap-4', children: [_jsx("span", { className: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-line/60 text-sm font-bold text-ink/70', children: index + 1 }), _jsxs("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [_jsx("span", { className: 'text-sm font-bold text-ink', children: step.title }), _jsx("span", { className: 'text-sm leading-5 text-ink/55', children: step.description })] })] }, step.id))) })), actions] }), preview === undefined ? null : _jsx("div", { className: 'relative hidden xl:block', children: preview })] }) }));
+            : 'grid items-center gap-10', children: [_jsxs("div", { className: 'flex flex-col gap-7', children: [_jsxs("div", { className: 'flex flex-col gap-3', children: [_jsx("h2", { className: 'text-3xl font-extrabold leading-tight text-ink', children: title }), _jsx("p", { className: 'max-w-md text-sm leading-6 text-ink/60', children: description })] }), highlight, steps === undefined ? null : (_jsx("ol", { className: 'flex flex-col gap-4', children: steps.map((step, index) => (_jsxs("li", { className: 'flex items-start gap-4', children: [_jsx("span", { className: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-line/60 text-sm font-bold text-ink/70', children: index + 1 }), _jsxs("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [_jsx("span", { className: 'text-sm font-bold text-ink', children: step.title }), _jsx("span", { className: 'text-sm leading-5 text-muted', children: step.description })] })] }, step.id))) })), actions] }), preview === undefined ? null : _jsx("div", { className: 'relative hidden xl:block', children: preview })] }) }));

package/dist/esm/components/ps-start-preview.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PsStartPreview = ({ badge, children, note, title }) => (_jsxs("div", { className: 'rounded-2xl border border-line/60 bg-surface/60 p-5', children: [_jsxs("div", { className: 'mb-4 flex items-center justify-between', children: [_jsx("span", { className: 'text-sm font-bold text-ink', children: title }), badge === undefined ? null : (_jsx("span", { className: 'rounded-ps-control border border-warning/40 px-2.5 py-1 text-xs font-semibold text-warning', children: badge }))] }), _jsx("ul", { className: 'flex flex-col', children: children }), note === undefined ? null : (_jsx("p", { className: 'mt-4 border-t border-line/40 pt-4 text-xs leading-5 text-ink/45', children: note }))] }));
+export const PsStartPreview = ({ badge, children, note, title }) => (_jsxs("div", { className: 'rounded-2xl border border-line/60 bg-surface/60 p-5', children: [_jsxs("div", { className: 'mb-4 flex items-center justify-between', children: [_jsx("span", { className: 'text-sm font-bold text-ink', children: title }), badge === undefined ? null : (_jsx("span", { className: 'rounded-ps-control border border-warning/40 px-2.5 py-1 text-xs font-semibold text-warning', children: badge }))] }), _jsx("ul", { className: 'flex flex-col', children: children }), note === undefined ? null : (_jsx("p", { className: 'mt-4 border-t border-line/40 pt-4 text-xs leading-5 text-subtle', children: note }))] }));

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

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsStepMarkerClassNames } from '../constants/ps-step-marker-class-names.js';
 import { PsStepState } from '../constants/ps-step-state.js';
 export const PsStepList = ({ steps }) => (_jsx("ol", { className: 'flex flex-col rounded-ps-panel border border-line bg-surface', children: steps.map((step, index) => (_jsxs("li", { "aria-current": step.state === PsStepState.current ? 'step' : undefined, className: 'relative flex gap-4 border-b border-line/70 px-5 py-4 last:border-0', children: [_jsx("span", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold ${PsStepMarkerClassNames[step.state]}`, children: step.state === PsStepState.done ? _jsx("span", { "aria-hidden": 'true', children: "\u2713" }) : index + 1 }), _jsxs("div", { className: 'flex min-w-0 flex-1 flex-col gap-3', children: [_jsxs("div", { className: 'flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between', children: [_jsxs("div", { className: 'min-w-0', children: [_jsx("h3", { className: step.state === PsStepState.upcoming
-                                            ? 'text-sm font-semibold text-ink/50'
+                                            ? 'text-sm font-semibold text-muted'
                                             : 'text-sm font-semibold text-ink', children: step.title }), _jsx("p", { className: 'mt-0.5 text-sm text-ink/60', children: step.description })] }), step.actions ? (_jsx("div", { className: 'flex shrink-0 flex-wrap items-center gap-2', children: step.actions })) : null] }), step.content ? _jsx("div", { className: 'min-w-0', children: step.content }) : null] })] }, step.id))) }));

package/dist/esm/components/ps-summary-bar.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PsSummaryBar = ({ items }) => (_jsx("dl", { className: 'grid grid-cols-2 gap-x-6 gap-y-4 rounded-ps-panel border border-line bg-surface px-5 py-4 sm:flex sm:flex-wrap sm:items-center sm:gap-x-10', children: items.map((item) => (_jsxs("div", { className: 'flex min-w-0 flex-col gap-1', children: [_jsx("dt", { className: 'text-xs font-medium uppercase tracking-wide text-ink/50', children: item.label }), _jsx("dd", { className: item.emphasis
+export const PsSummaryBar = ({ items }) => (_jsx("dl", { className: 'grid grid-cols-2 gap-x-6 gap-y-4 rounded-ps-panel border border-line bg-surface px-5 py-4 sm:flex sm:flex-wrap sm:items-center sm:gap-x-10', children: items.map((item) => (_jsxs("div", { className: 'flex min-w-0 flex-col gap-1', children: [_jsx("dt", { className: 'text-xs font-medium uppercase tracking-wide text-muted', children: item.label }), _jsx("dd", { className: item.emphasis
                     ? 'truncate text-xl font-semibold tabular-nums text-ink'
                     : 'truncate text-sm font-medium text-ink', children: item.value })] }, item.label))) }));

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PsPageSkeleton } from './ps-page-skeleton.js';
 import { PsTableListSkeleton } from './ps-table-list-skeleton.js';
-export const PsTablePageSkeleton = ({ isNarrow = false, loadingLabel, title, }) => (_jsx(PsPageSkeleton, { hasActions: true, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, children: _jsx(PsTableListSkeleton, {}) }));
+export const PsTablePageSkeleton = ({ isNarrow, loadingLabel, title, width, }) => (_jsx(PsPageSkeleton, { hasActions: true, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, width: width, children: _jsx(PsTableListSkeleton, {}) }));

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

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

package/dist/esm/constants/ps-page-width-class-names.js

@@ -0,0 +1,7 @@
+import { PsPageWidth } from './ps-page-width.js';
+export const PsPageWidthClassNames = {
+    [PsPageWidth.Form]: 'mx-auto flex w-full min-w-0 max-w-7xl flex-col',
+    [PsPageWidth.List]: 'flex min-w-0 flex-col',
+    [PsPageWidth.Record]: 'flex min-w-0 flex-col',
+    [PsPageWidth.Settings]: 'mx-auto flex w-full min-w-0 max-w-7xl flex-col',
+};

package/dist/esm/constants/ps-page-width.js

@@ -0,0 +1,7 @@
+export var PsPageWidth;
+(function (PsPageWidth) {
+    PsPageWidth["Form"] = "form";
+    PsPageWidth["List"] = "list";
+    PsPageWidth["Record"] = "record";
+    PsPageWidth["Settings"] = "settings";
+})(PsPageWidth || (PsPageWidth = {}));

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

@@ -1,4 +1,5 @@
 export const PsSplitViewConfig = {
     minHeight: 448,
     scrollableOverflow: /(auto|scroll)/,
+    wideQuery: '(min-width: 1280px)',
 };

package/dist/esm/constants/ps-start-highlight-class-name.js

@@ -0,0 +1 @@
+export const PsStartHighlightClassName = 'ps-focus-ring group flex items-center gap-4 rounded-2xl border border-primary/40 bg-gradient-to-br from-primary/20 via-primary/10 to-transparent p-4 text-left transition-colors hover:border-primary/70';

package/dist/esm/constants/ps-step-marker-class-names.js

@@ -2,5 +2,5 @@ import { PsStepState } from './ps-step-state.js';
 export const PsStepMarkerClassNames = {
     [PsStepState.done]: 'border-success bg-success text-white',
     [PsStepState.current]: 'border-primary bg-primary/10 text-primary',
-    [PsStepState.upcoming]: 'border-line bg-surface text-ink/40',
+    [PsStepState.upcoming]: 'border-line bg-surface text-subtle',
 };

package/dist/esm/index.js

@@ -138,6 +138,9 @@ export * from './components/ps-metric-row.js';
 export * from './components/ps-page-header.js';
 export * from './components/ps-page-intro.js';
 export * from './components/ps-page-layout.js';
+export * from './constants/ps-page-width.js';
+export * from './constants/ps-page-width-class-names.js';
+export * from './services/ps-page-width-service.js';
 export * from './components/ps-page-skeleton.js';
 export * from './components/ps-page-stack.js';
 export * from './components/ps-section-panel.js';
@@ -169,6 +172,8 @@ 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';
+export * from './components/ps-start-highlight-link.js';
+export * from './constants/ps-start-highlight-class-name.js';
 export * from './components/ps-start-panel.js';
 export * from './components/ps-start-preview.js';
 export * from './components/ps-step-list.js';

package/dist/esm/services/ps-page-width-service.js

@@ -0,0 +1,8 @@
+import { PsPageWidth } from '../constants/ps-page-width.js';
+export class PsPageWidthService {
+    static resolve(width, isNarrow) {
+        if (width !== undefined)
+            return width;
+        return isNarrow === true ? PsPageWidth.Settings : PsPageWidth.List;
+    }
+}

package/dist/index.d.ts

@@ -138,6 +138,9 @@ export * from './components/ps-metric-row';
 export * from './components/ps-page-header';
 export * from './components/ps-page-intro';
 export * from './components/ps-page-layout';
+export * from './constants/ps-page-width';
+export * from './constants/ps-page-width-class-names';
+export * from './services/ps-page-width-service';
 export * from './components/ps-page-skeleton';
 export * from './components/ps-page-stack';
 export * from './components/ps-section-panel';
@@ -169,6 +172,8 @@ export * from './components/ps-split-view';
 export * from './components/ps-overview-card';
 export * from './components/ps-form-footer';
 export * from './components/ps-start-highlight';
+export * from './components/ps-start-highlight-link';
+export * from './constants/ps-start-highlight-class-name';
 export * from './components/ps-start-panel';
 export * from './components/ps-start-preview';
 export * from './components/ps-step-list';

package/dist/index.js

@@ -155,6 +155,9 @@ __exportStar(require("./components/ps-metric-row"), exports);
 __exportStar(require("./components/ps-page-header"), exports);
 __exportStar(require("./components/ps-page-intro"), exports);
 __exportStar(require("./components/ps-page-layout"), exports);
+__exportStar(require("./constants/ps-page-width"), exports);
+__exportStar(require("./constants/ps-page-width-class-names"), exports);
+__exportStar(require("./services/ps-page-width-service"), exports);
 __exportStar(require("./components/ps-page-skeleton"), exports);
 __exportStar(require("./components/ps-page-stack"), exports);
 __exportStar(require("./components/ps-section-panel"), exports);
@@ -186,6 +189,8 @@ __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);
+__exportStar(require("./components/ps-start-highlight-link"), exports);
+__exportStar(require("./constants/ps-start-highlight-class-name"), exports);
 __exportStar(require("./components/ps-start-panel"), exports);
 __exportStar(require("./components/ps-start-preview"), exports);
 __exportStar(require("./components/ps-step-list"), exports);

package/dist/services/ps-page-width-service.d.ts

@@ -0,0 +1,4 @@
+import { PsPageWidth } from '../constants/ps-page-width';
+export declare class PsPageWidthService {
+    static resolve(width: PsPageWidth | undefined, isNarrow: boolean | undefined): PsPageWidth;
+}

package/dist/services/ps-page-width-service.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPageWidthService = void 0;
+const ps_page_width_1 = require("../constants/ps-page-width");
+class PsPageWidthService {
+    static resolve(width, isNarrow) {
+        if (width !== undefined)
+            return width;
+        return isNarrow === true ? ps_page_width_1.PsPageWidth.Settings : ps_page_width_1.PsPageWidth.List;
+    }
+}
+exports.PsPageWidthService = PsPageWidthService;

package/package.json

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