@pallasoft/ps-core-components 1.4.0 → 2.1.0

package/dist/components/ps-accordion.js

@@ -35,8 +35,8 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsAccordion = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
+const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
 const PsAccordion = ({ children, className, isOpen, label, onToggle, trailing, }) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Root, { type: 'single', collapsible: true, value: isOpen ? 'open' : '', onValueChange: onToggle, className: ps_design_system_1.PallasoftClassNameService.merge('overflow-hidden rounded-ps-card border border-line/70 bg-surface/60 transition-colors duration-200', isOpen ? 'border-primary/25 bg-surface' : 'hover:border-line hover:bg-surface/90', className), children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Item, { value: 'open', children: [(0, jsx_runtime_1.jsx)(AccordionPrimitive.Header, { children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { className: 'ps-focus-ring flex w-full items-center justify-between gap-3 px-4 py-3.5 text-left', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-body-2 font-semibold text-ink', children: label }), (0, jsx_runtime_1.jsxs)("span", { className: 'flex shrink-0 items-center gap-2', children: [trailing, (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, className: ps_design_system_1.PallasoftClassNameService.merge('h-4 w-4 text-ink/40 transition-transform duration-200', isOpen ? 'rotate-90 text-primary' : '') })] })] }) }), (0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { className: 'ps-accordion-content', children: (0, jsx_runtime_1.jsx)("div", { className: 'border-t border-line/70 p-4', children: children }) })] }) }));
 exports.PsAccordion = PsAccordion;

package/dist/components/ps-button.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_spinner_1 = require("./ps-spinner");
 const sizeClassNames = {
     compact: 'min-h-9 px-3 py-2 text-sm',
     default: 'min-h-10 px-4 py-2.5 text-sm',
@@ -15,5 +16,5 @@ const variantClassNames = {
     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',
 };
-const PsButton = ({ children, className, disabled, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold disabled:cursor-not-allowed disabled:opacity-50', sizeClassNames[size], variantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent' })) : leadingIcon ? ((0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: leadingIcon })) : null, (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: isLoading && loadingLabel ? loadingLabel : children }), !isLoading && trailingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: trailingIcon }) : null] }));
+const PsButton = ({ children, className, disabled, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold disabled:cursor-not-allowed disabled:opacity-50', sizeClassNames[size], variantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? ((0, jsx_runtime_1.jsx)(ps_spinner_1.PsSpinner, { className: 'absolute inset-0 m-auto text-current', label: loadingLabel !== null && loadingLabel !== undefined ? loadingLabel : 'Loading', size: 'small' })) : null, (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": isLoading || undefined, className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-w-0 items-center gap-2', isLoading ? 'invisible' : ''), children: [leadingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: leadingIcon }) : null, (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: children }), trailingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));
 exports.PsButton = PsButton;

package/dist/components/ps-card.js

@@ -14,5 +14,5 @@ const variantClassNames = {
     glass: 'ps-glass',
     muted: 'ps-card-muted',
 };
-const PsCard = ({ children, className, density = 'normal', eyebrow, title, trailing, variant = 'default', }) => ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), children: [title ? ((0, jsx_runtime_1.jsxs)("div", { className: 'mb-3 flex min-w-0 items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h2", { className: 'mt-1 break-words text-base font-bold text-ink', children: title })] }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'shrink-0', children: trailing }) : null] })) : null, children] }));
+const PsCard = ({ children, className, density = 'normal', eyebrow, title, trailing, variant = 'default', }) => ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), children: [title ? ((0, jsx_runtime_1.jsxs)("div", { className: 'mb-3 flex min-w-0 items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [eyebrow ? (0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, (0, jsx_runtime_1.jsx)("h2", { className: 'mt-1 break-words text-base font-bold text-ink', children: title })] }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'shrink-0', children: trailing }) : null] })) : null, children] }));
 exports.PsCard = PsCard;

package/dist/components/ps-draggable-grid.js

@@ -39,9 +39,10 @@ const PsDraggableGrid = ({ getItemClassName, items, onReorder, onReorderEnd, ren
                     draggedItemId = item.id;
                 }, title: `Move ${item.label}`, type: 'button', children: (0, jsx_runtime_1.jsx)(DragHandleIcon, {}) }));
             const renderedItem = renderItem({ handle, index, isDragging, item });
+            const itemClassName = getItemClassName?.(item);
             if (!renderedItem)
                 return null;
-            return ((0, jsx_runtime_1.jsx)("div", { className: `ps-page-enter min-w-0 rounded-[1.7rem] transition ${getItemClassName?.(item) ?? ''} ${isDragging ? 'scale-[0.985] opacity-70' : ''}`, onDragOver: (event) => {
+            return ((0, jsx_runtime_1.jsx)("div", { className: `ps-page-enter min-w-0 rounded-[1.7rem] transition ${itemClassName !== null && itemClassName !== undefined ? itemClassName : ''} ${isDragging ? 'scale-[0.985] opacity-70' : ''}`, onDragOver: (event) => {
                     if (!draggedItemId)
                         return;
                     event.preventDefault();

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

@@ -8,12 +8,14 @@ export interface PsEmptyStateAction {
 }
 export interface PsEmptyStateProps {
     actions?: PsEmptyStateAction[];
+    children?: ReactNode;
     badge?: string;
     className?: string;
     detail?: string;
-    description: string;
+    description?: string;
     eyebrow?: string;
     icon?: ReactNode;
     title: string;
+    variant?: 'inline' | 'page';
 }
-export declare const PsEmptyState: ({ actions, badge, className, detail, description, eyebrow, icon, title, }: PsEmptyStateProps) => import("react").JSX.Element;
+export declare const PsEmptyState: ({ actions, badge, children, className, detail, description, eyebrow, icon, title, variant, }: PsEmptyStateProps) => import("react").JSX.Element;

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

@@ -9,5 +9,24 @@ const getActionClassName = (variant = 'secondary') => {
     }
     return 'border-line bg-surface text-ink hover:border-primary/40 hover:text-primary';
 };
-const PsEmptyState = ({ actions = [], badge, className, detail, description, eyebrow, icon, title, }) => ((0, jsx_runtime_1.jsx)("main", { className: ps_design_system_1.PallasoftClassNameService.merge('relative flex min-h-screen items-center justify-center bg-mist px-4 py-10 text-ink', className), children: (0, jsx_runtime_1.jsx)("section", { className: 'ps-card relative w-full max-w-2xl p-6 sm:p-8', children: (0, jsx_runtime_1.jsxs)("div", { className: '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: 'min-w-0 flex-1', children: [(0, jsx_runtime_1.jsxs)("div", { className: '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)("h1", { className: 'mt-3 text-3xl font-semibold tracking-tight sm:text-4xl', children: title }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-3 text-sm leading-6 text-ink/60', children: description }), detail ? ((0, jsx_runtime_1.jsx)("p", { className: 'mt-4 rounded-2xl border border-line bg-mist px-4 py-3 text-left text-xs leading-5 text-ink/60', children: detail })) : null, actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: 'mt-6 flex flex-col gap-2 sm:flex-row', children: actions.map((action) => ((0, jsx_runtime_1.jsx)("a", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring ps-pressable inline-flex items-center justify-center rounded-ps-control border px-4 py-3 text-sm font-semibold', getActionClassName(action.variant)), href: action.href, rel: action.rel, target: action.target, children: action.label }, `${action.href}-${action.label}`))) })) : null] })] }) }) }));
+const PsEmptyState = ({ actions = [], badge, children, className, detail, description, eyebrow, icon, title, variant = 'page', }) => {
+    const isInline = variant === 'inline';
+    const Wrapper = isInline ? 'div' : 'main';
+    const Heading = isInline ? 'h3' : 'h1';
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: ps_design_system_1.PallasoftClassNameService.merge(isInline
+            ? 'flex items-center justify-center rounded-ps-panel border border-dashed border-line bg-mist/40 px-6 py-10 text-ink'
+            : 'relative flex min-h-screen items-center justify-center bg-mist px-4 py-10 text-ink', className), children: (0, jsx_runtime_1.jsx)("section", { className: isInline
+                ? 'relative w-full max-w-2xl text-center'
+                : 'ps-card relative w-full max-w-2xl p-6 sm:p-8', children: (0, jsx_runtime_1.jsxs)("div", { className: isInline
+                    ? '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
+                                    ? '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'
+                                    : 'mt-3 text-sm leading-6 text-ink/60', children: description })) : null, detail ? ((0, jsx_runtime_1.jsx)("p", { className: 'mt-4 rounded-2xl border border-line bg-mist px-4 py-3 text-left text-xs leading-5 text-ink/60', children: detail })) : null, children ? (0, jsx_runtime_1.jsx)("div", { className: 'mt-5 flex justify-center', children: children }) : null, actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: isInline
+                                    ? 'mt-5 flex flex-col justify-center gap-2 sm:flex-row'
+                                    : 'mt-6 flex flex-col gap-2 sm:flex-row', children: actions.map((action) => ((0, jsx_runtime_1.jsx)("a", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring ps-pressable inline-flex items-center justify-center rounded-ps-control border px-4 py-3 text-sm font-semibold', getActionClassName(action.variant)), href: action.href, rel: action.rel, target: action.target, children: action.label }, `${action.href}-${action.label}`))) })) : null] })] }) }) }));
+};
 exports.PsEmptyState = PsEmptyState;

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

@@ -1,4 +1,4 @@
-import type { PsButtonProps } from './ps-button';
+import { type PsButtonProps } from './ps-button';
 export interface PsFabProps extends PsButtonProps {
     position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
 }

package/dist/components/ps-infinite-scroll.js

@@ -8,5 +8,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_infinite_scroll_component_1 = __importDefault(require("react-infinite-scroll-component"));
 const ps_spinner_1 = require("./ps-spinner");
 const defaultLoader = ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full justify-center py-8', children: (0, jsx_runtime_1.jsx)(ps_spinner_1.PsSpinner, {}) }));
-const PsInfiniteScroll = ({ children, className, dataLength, hasMore, loader, next, }) => ((0, jsx_runtime_1.jsx)(react_infinite_scroll_component_1.default, { className: className, dataLength: dataLength, hasMore: hasMore, loader: loader ?? defaultLoader, next: next, children: children }));
+const PsInfiniteScroll = ({ children, className, dataLength, hasMore, loader, next, }) => ((0, jsx_runtime_1.jsx)(react_infinite_scroll_component_1.default, { className: className, dataLength: dataLength, hasMore: hasMore, loader: loader !== null && loader !== undefined ? loader : defaultLoader, next: next, children: children }));
 exports.PsInfiniteScroll = PsInfiniteScroll;

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

@@ -11,5 +11,5 @@ const variantClassNames = {
     card: 'ps-surface px-3',
     row: 'border-b border-line/70 px-0 last:border-b-0',
 };
-const PsListTile = ({ children, className, density = 'normal', eyebrow, isPrivateTitle = false, subtitle, title, variant = 'row', }) => ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden', variantClassNames[variant], densityClassNames[density], className), children: [eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("p", { className: ps_design_system_1.PallasoftClassNameService.merge('break-words text-sm font-semibold text-ink', eyebrow && 'mt-1', isPrivateTitle && 'private-number'), children: title }), subtitle ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 break-words text-sm leading-5 text-slate-500', children: subtitle }) : null, children] }));
+const PsListTile = ({ children, className, density = 'normal', eyebrow, isPrivateTitle = false, subtitle, title, variant = 'row', }) => ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden', variantClassNames[variant], densityClassNames[density], className), children: [eyebrow ? (0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, (0, jsx_runtime_1.jsx)("p", { className: ps_design_system_1.PallasoftClassNameService.merge('break-words text-sm font-semibold text-ink', eyebrow && 'mt-1', isPrivateTitle && 'private-number'), children: title }), subtitle ? ((0, jsx_runtime_1.jsx)("p", { className: 'mt-1 break-words text-sm leading-5 text-slate-500', children: subtitle })) : null, children] }));
 exports.PsListTile = PsListTile;

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

@@ -6,4 +6,4 @@ export interface PsMetricCardProps {
     label: string;
     value: ReactNode;
 }
-export declare const PsMetricCard: ({ changeLabel, className, icon, label, value, }: PsMetricCardProps) => import("react").JSX.Element;
+export declare const PsMetricCard: ({ changeLabel, className, icon, label, value }: PsMetricCardProps) => import("react").JSX.Element;

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

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsMetricCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsMetricCard = ({ changeLabel, className, icon, label, value, }) => ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-metric-card min-w-0 p-3.5 sm:p-4', className), children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow truncate', children: label }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-2 truncate text-2xl font-semibold text-ink', children: value }), changeLabel ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-slate-500', children: changeLabel }) : null] }), icon ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-soft text-primary', children: icon })) : null] }) }));
+const PsMetricCard = ({ changeLabel, className, icon, label, value }) => ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-metric-card min-w-0 p-3.5 sm:p-4', className), children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow truncate', children: label }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-2 truncate text-2xl font-semibold text-ink', children: value }), changeLabel ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-slate-500', children: changeLabel }) : null] }), icon ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-soft text-primary', children: icon })) : null] }) }));
 exports.PsMetricCard = PsMetricCard;

package/dist/components/ps-navigation-progress.d.ts

@@ -0,0 +1,8 @@
+export interface PsNavigationProgressProps {
+    color: string;
+    height?: number;
+    loaderSpeed?: number;
+    progress: number;
+    shadow?: boolean;
+}
+export declare const PsNavigationProgress: ({ color, height, loaderSpeed, progress, shadow, }: PsNavigationProgressProps) => import("react").JSX.Element;

package/dist/components/ps-navigation-progress.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsNavigationProgress = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_top_loading_bar_1 = __importDefault(require("react-top-loading-bar"));
+const PsNavigationProgress = ({ color, height = 3, loaderSpeed = 1000, progress, shadow = true, }) => ((0, jsx_runtime_1.jsx)(react_top_loading_bar_1.default, { color: color, height: height, loaderSpeed: loaderSpeed, progress: progress, shadow: shadow }));
+exports.PsNavigationProgress = PsNavigationProgress;

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

@@ -9,10 +9,10 @@ export interface PsPortableTextProps {
     linkClassName?: string;
     LinkComponent?: ElementType<{
         'aria-label'?: string;
-        children?: ReactNode;
-        className?: string;
-        href: string;
-        rel?: string;
+        'children'?: ReactNode;
+        'className'?: string;
+        'href': string;
+        'rel'?: string;
     }>;
     listClasses?: string;
     text: TypedObject[];

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsPortableText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@portabletext/react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const react_1 = require("@portabletext/react");
 const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', isLargeBodyFont = false, linkClassName = 'text-primary underline', LinkComponent = 'a', listClasses = 'text-ink', text, }) => {
     const hasContainerStyles = Object.keys(containerStyles).length > 0;
     const getBodyClass = hasContainerStyles ? '' : bodyClasses;

package/dist/components/ps-reflective-app-shell.d.ts

@@ -1,10 +1,12 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface PsReflectiveAppShellProps {
     children: ReactNode;
     className?: string;
     contentClassName?: string;
     frameClassName?: string;
+    scrollResetKey?: string;
     sidebar: ReactNode;
+    sidebarWidth?: string;
     topbar: ReactNode;
 }
-export declare const PsReflectiveAppShell: ({ children, className, contentClassName, frameClassName, sidebar, topbar, }: PsReflectiveAppShellProps) => import("react").JSX.Element;
+export declare const PsReflectiveAppShell: ({ children, className, contentClassName, frameClassName, scrollResetKey, sidebar, sidebarWidth, topbar, }: PsReflectiveAppShellProps) => import("react").JSX.Element;

package/dist/components/ps-reflective-app-shell.js

@@ -2,6 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsReflectiveAppShell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsReflectiveAppShell = ({ children, className, contentClassName, frameClassName, sidebar, topbar, }) => ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-reflective-frame min-h-screen text-ink lg:px-3 lg:py-3', className), children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-liquid-strong mx-auto grid h-screen min-h-0 overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl dark:border-white/10 dark:bg-surface/70 lg:h-[calc(100vh-1.5rem)] lg:max-w-[1720px] lg:grid-cols-[17rem_minmax(0,1fr)] lg:rounded-[1.5rem] lg:border', frameClassName), children: [sidebar, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, (0, jsx_runtime_1.jsx)("main", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
+const PsReflectiveAppShell = ({ children, className, contentClassName, frameClassName, scrollResetKey, sidebar, sidebarWidth = '17rem', topbar, }) => {
+    const contentRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        if (scrollResetKey === undefined)
+            return;
+        contentRef.current?.scrollTo({ top: 0, left: 0 });
+        window.scrollTo({ top: 0, left: 0 });
+    }, [scrollResetKey]);
+    return ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-reflective-frame min-h-screen text-ink lg:px-3 lg:py-3', className), children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-liquid-strong mx-auto grid h-screen min-h-0 overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)] lg:h-[calc(100vh-1.5rem)] lg:max-w-[1720px] lg:rounded-[1.5rem] lg:border', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, (0, jsx_runtime_1.jsx)("main", { ref: contentRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
+};
 exports.PsReflectiveAppShell = PsReflectiveAppShell;

package/dist/components/ps-section-header.d.ts

@@ -2,7 +2,8 @@ import type { ReactNode } from 'react';
 export interface PsSectionHeaderProps {
     description?: string;
     eyebrow?: string;
+    leading?: ReactNode;
     title: string;
     trailing?: ReactNode;
 }
-export declare const PsSectionHeader: ({ description, eyebrow, title, trailing }: PsSectionHeaderProps) => import("react").JSX.Element;
+export declare const PsSectionHeader: ({ description, eyebrow, leading, title, trailing, }: PsSectionHeaderProps) => import("react").JSX.Element;

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

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const PsSectionHeader = ({ description, eyebrow, title, trailing }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col justify-between gap-3 lg:flex-row lg:items-end', children: [(0, jsx_runtime_1.jsxs)("div", { children: [eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-slate-400', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'text-2xl font-extrabold text-ink', children: title }), description ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-2 max-w-3xl text-sm leading-6 text-slate-500', children: description }) : null] }), trailing] }));
+const PsSectionHeader = ({ description, eyebrow, leading, title, trailing, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col justify-between gap-3 lg:flex-row lg:items-end', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 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: 'text-2xl font-extrabold text-ink', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing] }));
 exports.PsSectionHeader = PsSectionHeader;

package/dist/components/ps-site-header.d.ts

@@ -1,15 +1,19 @@
 import type { ElementType, ReactNode } from 'react';
 export interface PsSiteHeaderProps {
     centerContent?: ReactNode;
+    className?: string;
     homeHref: string;
     label: string;
     LinkComponent?: ElementType;
     logoAlt?: string;
     logoClassName?: string;
     logoSrc: string;
+    logoSrcDark?: string;
     logoSrcMobile?: string;
+    logoSrcMobileDark?: string;
+    navClassName?: string;
     onBack?: () => void;
     showLabel?: boolean;
     trailing?: ReactNode;
 }
-export declare const PsSiteHeader: ({ centerContent, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcMobile, onBack, showLabel, trailing, }: PsSiteHeaderProps) => import("react").JSX.Element;
+export declare const PsSiteHeader: ({ centerContent, className, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcDark, logoSrcMobile, logoSrcMobileDark, navClassName, onBack, showLabel, trailing, }: PsSiteHeaderProps) => import("react").JSX.Element;

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

@@ -5,10 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const logoLinkClassName = 'flex shrink-0 items-center gap-2.5';
-const PsSiteHeader = ({ centerContent, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcMobile, onBack, showLabel = false, trailing, }) => {
+const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcDark, logoSrcMobile, logoSrcMobileDark, navClassName, onBack, showLabel = false, trailing, }) => {
     const logoLabel = `${label} home`;
-    const logoContent = logoSrcMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt ?? label, className: ps_design_system_1.PallasoftClassNameService.merge('hidden h-8 w-auto sm:block', logoClassName), src: logoSrc }), (0, jsx_runtime_1.jsx)("img", { alt: logoAlt ?? label, className: ps_design_system_1.PallasoftClassNameService.merge('h-8 w-auto sm:hidden', logoClassName), src: logoSrcMobile }), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt ?? label, className: ps_design_system_1.PallasoftClassNameService.merge('h-8 w-auto', logoClassName), src: logoSrc }), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
+    const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), src: src }), (0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), src: darkSrc })] })) : ((0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, logoClassName), src: src }));
+    const logoContent = logoSrcMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'hidden sm:contents', children: renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto') }), (0, jsx_runtime_1.jsx)("span", { className: 'contents sm:hidden', children: renderLogo(logoSrcMobile, logoSrcMobileDark, 'h-8 w-auto') }), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto'), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
     const logoLink = LinkComponent ? ((0, jsx_runtime_1.jsx)(LinkComponent, { "aria-label": logoLabel, className: logoLinkClassName, to: homeHref, children: logoContent })) : ((0, jsx_runtime_1.jsx)("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
-    return ((0, jsx_runtime_1.jsx)("header", { className: 'fixed inset-x-0 top-0 z-header px-6 pt-4', children: (0, jsx_runtime_1.jsxs)("nav", { className: 'ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)("header", { className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: (0, jsx_runtime_1.jsxs)("nav", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
 };
 exports.PsSiteHeader = PsSiteHeader;

package/dist/components/ps-theme-toggle.d.ts

@@ -1,5 +1,5 @@
-import { PallasoftThemeMode } from '@pallasoft/ps-design-system';
 import type { ButtonHTMLAttributes } from 'react';
+import { PallasoftThemeMode } from '@pallasoft/ps-design-system';
 export interface PsThemeToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     mode: PallasoftThemeMode;
 }

package/dist/components/ps-voice-orb.d.ts

@@ -1,7 +1,2 @@
-export interface PsVoiceOrbProps {
-    className?: string;
-    level?: number;
-    size?: number;
-    variant?: 'default' | 'error';
-}
+import { PsVoiceOrbProps } from '../models/ps-voice-orb';
 export declare const PsVoiceOrb: (props: PsVoiceOrbProps) => import("react").JSX.Element;

package/dist/components/ps-voice-orb.js

@@ -2,39 +2,103 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsVoiceOrb = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_voice_orb_1 = require("../constants/ps-voice-orb");
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const approach = (current, target, factor) => current + (target - current) * factor;
+const buildRimMask = (innerStopPercent) => `radial-gradient(circle, transparent ${innerStopPercent}%, black ${innerStopPercent + 6}%, black 92%, transparent 97%)`;
+const initialRimMask = buildRimMask(ps_voice_orb_1.PsVoiceOrbConfig.rimInnerStopPercent);
+const buildBlobRadius = (phase, depth) => {
+    const harmonic = ps_voice_orb_1.PsVoiceOrbConfig.blobSecondHarmonic;
+    const corner = (offset) => (50 +
+        Math.sin(phase + offset) * depth * 0.65 +
+        Math.sin(phase * harmonic + offset * 2) * depth * 0.35).toFixed(2);
+    return `${corner(0)}% ${corner(1.7)}% ${corner(3.4)}% ${corner(5.1)}% / ${corner(2.6)}% ${corner(4.3)}% ${corner(0.9)}% ${corner(6)}%`;
+};
 const PsVoiceOrb = (props) => {
-    const size = typeof props.size === 'number' ? props.size : 64;
+    const size = typeof props.size === 'number' ? props.size : ps_voice_orb_1.PsVoiceOrbConfig.defaultSize;
     const level = typeof props.level === 'number' ? clamp(props.level, 0, 1) : 0;
-    const isError = props.variant === 'error';
-    const glowGradient = isError
-        ? 'radial-gradient(circle, rgb(var(--ps-color-danger-rgb) / 0.55), rgb(var(--ps-color-danger-rgb) / 0.2) 70%, transparent)'
-        : 'radial-gradient(circle, rgb(var(--ps-color-primary-rgb) / 0.55), rgb(var(--ps-color-secondary-rgb) / 0.35) 70%, transparent)';
-    const coreGradient = isError
-        ? 'linear-gradient(135deg, rgb(var(--ps-color-danger-rgb)), rgb(var(--ps-color-danger-rgb) / 0.75))'
-        : 'linear-gradient(135deg, rgb(var(--ps-color-primary-rgb)), rgb(var(--ps-color-primary-dark-rgb)))';
-    return ((0, jsx_runtime_1.jsxs)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-voice-orb relative inline-flex shrink-0 items-center justify-center', props.className), style: { width: size, height: size }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-				@keyframes ps-voice-orb-breathe {
-					0%, 100% { transform: scale(1); }
-					50% { transform: scale(1.06); }
-				}
-				@keyframes ps-voice-orb-drift {
-					0%, 100% { border-radius: 46% 54% 58% 42% / 44% 46% 54% 56%; }
-					50% { border-radius: 54% 46% 42% 58% / 56% 44% 56% 44%; }
-				}
-				.ps-voice-orb-glow {
-					animation: ps-voice-orb-drift 9s ease-in-out infinite;
-				}
-				.ps-voice-orb-core {
-					animation: ps-voice-orb-breathe 3.2s ease-in-out infinite;
-				}
-			` }), (0, jsx_runtime_1.jsx)("span", { className: 'ps-voice-orb-glow absolute inset-[10%] blur-md transition-transform duration-150 ease-out', style: {
-                    background: glowGradient,
-                    transform: `scale(${1 + level * 0.55})`,
-                } }), (0, jsx_runtime_1.jsx)("span", { className: 'ps-voice-orb-core absolute inset-[26%] flex items-center justify-center rounded-full shadow-lg transition-transform duration-150 ease-out', style: {
-                    background: coreGradient,
-                    transform: `scale(${1 + level * 0.28})`,
-                }, children: (0, jsx_runtime_1.jsx)("span", { className: 'h-[28%] w-[28%] rounded-full bg-white/70' }) })] }));
+    const state = props.state ? props.state : props.variant === 'error' ? 'error' : 'idle';
+    const isError = state === 'error' || props.variant === 'error';
+    const cadence = ps_voice_orb_1.PsVoiceOrbCadenceByState[state];
+    const theme = ps_voice_orb_1.PsVoiceOrbThemes[isError ? 'error' : 'default'];
+    const containerRef = (0, react_1.useRef)(null);
+    const glowRef = (0, react_1.useRef)(null);
+    const glassRef = (0, react_1.useRef)(null);
+    const rimRef = (0, react_1.useRef)(null);
+    const coreRef = (0, react_1.useRef)(null);
+    const targetLevelRef = (0, react_1.useRef)(level);
+    const cadenceRef = (0, react_1.useRef)(cadence);
+    targetLevelRef.current = level;
+    cadenceRef.current = cadence;
+    (0, react_1.useEffect)(() => {
+        let frameId;
+        let lastFrameMs = performance.now();
+        let smoothedLevel = 0;
+        let spinDegrees = 0;
+        let wobblePhase = 0;
+        let pulsePhase = 0;
+        let orbitPhase = 0;
+        let smoothedPulse = 0;
+        let smoothedBlob = 0;
+        let smoothedOrbit = 0;
+        const tick = (now) => {
+            const deltaMs = Math.min(now - lastFrameMs, ps_voice_orb_1.PsVoiceOrbConfig.maxFrameMs);
+            const deltaS = deltaMs / 1000;
+            lastFrameMs = now;
+            const activeCadence = cadenceRef.current;
+            spinDegrees = (spinDegrees + (deltaS / activeCadence.spinS) * 360) % 360;
+            wobblePhase += deltaS * activeCadence.wobbleHz * Math.PI * 2;
+            pulsePhase += deltaS * activeCadence.pulseHz * Math.PI * 2;
+            orbitPhase += deltaS * ps_voice_orb_1.PsVoiceOrbConfig.coreOrbitHz * Math.PI * 2;
+            smoothedLevel = approach(smoothedLevel, targetLevelRef.current, ps_voice_orb_1.PsVoiceOrbConfig.levelSmoothing);
+            smoothedPulse = approach(smoothedPulse, activeCadence.pulseDepth, ps_voice_orb_1.PsVoiceOrbConfig.cadenceSmoothing);
+            smoothedBlob = approach(smoothedBlob, activeCadence.blobDepth, ps_voice_orb_1.PsVoiceOrbConfig.blobSmoothing);
+            smoothedOrbit = approach(smoothedOrbit, activeCadence.orbitDepth, ps_voice_orb_1.PsVoiceOrbConfig.blobSmoothing);
+            const voice = Math.pow(smoothedLevel, ps_voice_orb_1.PsVoiceOrbConfig.levelCurve);
+            const pulse = ((Math.sin(pulsePhase) + 1) / 2) * smoothedPulse;
+            const amplitude = clamp(Math.max(voice, pulse), 0, 1);
+            const blobRadius = buildBlobRadius(wobblePhase, smoothedBlob);
+            if (containerRef.current) {
+                containerRef.current.style.transform = `scale(${1 + amplitude * 0.3})`;
+            }
+            if (glowRef.current) {
+                glowRef.current.style.opacity = `${0.4 + amplitude * 0.55}`;
+                glowRef.current.style.transform = `scale(${1.05 + amplitude * 0.7})`;
+                glowRef.current.style.borderRadius = blobRadius;
+            }
+            if (glassRef.current) {
+                glassRef.current.style.borderRadius = blobRadius;
+            }
+            if (rimRef.current) {
+                const mask = buildRimMask(ps_voice_orb_1.PsVoiceOrbConfig.rimInnerStopPercent - amplitude * ps_voice_orb_1.PsVoiceOrbConfig.rimAmplitudeSpread);
+                rimRef.current.style.transform = `rotate(${spinDegrees}deg)`;
+                rimRef.current.style.maskImage = mask;
+                rimRef.current.style.webkitMaskImage = mask;
+            }
+            if (coreRef.current) {
+                const radius = ps_voice_orb_1.PsVoiceOrbConfig.coreOrbitRadiusPercent * smoothedOrbit;
+                const x = Math.cos(orbitPhase) * radius;
+                const y = Math.sin(orbitPhase * 1.3) * radius;
+                coreRef.current.style.opacity = `${smoothedOrbit * (0.55 + pulse * 0.45)}`;
+                coreRef.current.style.transform = `translate(calc(-50% + ${x.toFixed(2)}%), calc(-50% + ${y.toFixed(2)}%)) scale(${0.8 + pulse * 0.5})`;
+            }
+            frameId = requestAnimationFrame(tick);
+        };
+        frameId = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frameId);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("span", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-voice-orb relative inline-flex shrink-0 items-center justify-center', props.className), style: { width: size, height: size }, children: [(0, jsx_runtime_1.jsx)("span", { ref: glowRef, "aria-hidden": 'true', className: 'absolute inset-0 rounded-full opacity-40 blur-xl', style: { background: theme.rim } }), (0, jsx_runtime_1.jsxs)("span", { ref: glassRef, "aria-hidden": 'true', className: 'absolute inset-0 overflow-hidden rounded-full', children: [(0, jsx_runtime_1.jsx)("span", { className: 'absolute inset-0', style: { background: theme.glass } }), (0, jsx_runtime_1.jsx)("span", { ref: rimRef, className: 'absolute inset-0', style: {
+                            background: theme.rim,
+                            maskImage: initialRimMask,
+                            WebkitMaskImage: initialRimMask,
+                        } }), (0, jsx_runtime_1.jsx)("span", { ref: coreRef, className: 'absolute left-1/2 top-1/2 rounded-full opacity-0 blur-sm', style: {
+                            background: theme.core,
+                            width: `${ps_voice_orb_1.PsVoiceOrbConfig.coreSizePercent}%`,
+                            height: `${ps_voice_orb_1.PsVoiceOrbConfig.coreSizePercent}%`,
+                        } })] }), cadence.isRippling
+                ? ps_voice_orb_1.PsVoiceOrbConfig.rippleDelaysMs.map((delayMs) => ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'animate-ps-orb-ripple absolute inset-0 rounded-full border opacity-40', style: { borderColor: theme.ripple, animationDelay: `${delayMs}ms` } }, delayMs)))
+                : null] }));
 };
 exports.PsVoiceOrb = PsVoiceOrb;

package/dist/constants/ps-voice-orb.d.ts

@@ -0,0 +1,18 @@
+import { PsVoiceOrbCadence, PsVoiceOrbState, PsVoiceOrbTheme } from '../models/ps-voice-orb';
+export declare const PsVoiceOrbConfig: {
+    defaultSize: number;
+    levelSmoothing: number;
+    levelCurve: number;
+    cadenceSmoothing: number;
+    rimInnerStopPercent: number;
+    rimAmplitudeSpread: number;
+    maxFrameMs: number;
+    rippleDelaysMs: number[];
+    blobSmoothing: number;
+    blobSecondHarmonic: number;
+    coreSizePercent: number;
+    coreOrbitRadiusPercent: number;
+    coreOrbitHz: number;
+};
+export declare const PsVoiceOrbCadenceByState: Record<PsVoiceOrbState, PsVoiceOrbCadence>;
+export declare const PsVoiceOrbThemes: Record<'default' | 'error', PsVoiceOrbTheme>;

package/dist/constants/ps-voice-orb.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsVoiceOrbThemes = exports.PsVoiceOrbCadenceByState = exports.PsVoiceOrbConfig = void 0;
+exports.PsVoiceOrbConfig = {
+    defaultSize: 64,
+    levelSmoothing: 0.18,
+    levelCurve: 0.55,
+    cadenceSmoothing: 0.06,
+    rimInnerStopPercent: 66,
+    rimAmplitudeSpread: 18,
+    maxFrameMs: 64,
+    rippleDelaysMs: [0, 500],
+    blobSmoothing: 0.05,
+    blobSecondHarmonic: 1.7,
+    coreSizePercent: 46,
+    coreOrbitRadiusPercent: 22,
+    coreOrbitHz: 0.8,
+};
+exports.PsVoiceOrbCadenceByState = {
+    idle: {
+        spinS: 16,
+        wobbleHz: 0.12,
+        pulseHz: 0.25,
+        pulseDepth: 0.08,
+        blobDepth: 3,
+        orbitDepth: 0,
+        isRippling: false,
+    },
+    connecting: {
+        spinS: 2.5,
+        wobbleHz: 0.5,
+        pulseHz: 1.4,
+        pulseDepth: 0.3,
+        blobDepth: 12,
+        orbitDepth: 1,
+        isRippling: false,
+    },
+    listening: {
+        spinS: 5,
+        wobbleHz: 0.4,
+        pulseHz: 0.7,
+        pulseDepth: 0.16,
+        blobDepth: 6,
+        orbitDepth: 0,
+        isRippling: true,
+    },
+    thinking: {
+        spinS: 1.6,
+        wobbleHz: 0.55,
+        pulseHz: 0.9,
+        pulseDepth: 0.4,
+        blobDepth: 16,
+        orbitDepth: 1,
+        isRippling: false,
+    },
+    speaking: {
+        spinS: 3,
+        wobbleHz: 0.7,
+        pulseHz: 1.3,
+        pulseDepth: 0.22,
+        blobDepth: 8,
+        orbitDepth: 0,
+        isRippling: true,
+    },
+    error: {
+        spinS: 14,
+        wobbleHz: 0.15,
+        pulseHz: 0.6,
+        pulseDepth: 0.14,
+        blobDepth: 3,
+        orbitDepth: 0,
+        isRippling: false,
+    },
+};
+exports.PsVoiceOrbThemes = {
+    default: {
+        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.16), transparent 42%), radial-gradient(circle, rgb(var(--ps-color-primary-rgb) / 0.2), rgb(var(--ps-color-ink-rgb) / 0.94) 75%)',
+        rim: 'conic-gradient(rgb(var(--ps-color-primary-rgb)), rgb(var(--ps-color-accent-rgb)), rgb(var(--ps-color-secondary-rgb)), rgb(var(--ps-color-primary-dark-rgb)), rgb(var(--ps-color-primary-rgb)))',
+        ripple: 'rgb(var(--ps-color-primary-rgb) / 0.5)',
+        core: 'radial-gradient(circle, rgb(255 255 255 / 0.9), rgb(var(--ps-color-accent-rgb) / 0.7) 35%, transparent 70%)',
+    },
+    error: {
+        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.16), transparent 42%), radial-gradient(circle, rgb(var(--ps-color-danger-rgb) / 0.22), rgb(var(--ps-color-ink-rgb) / 0.94) 75%)',
+        rim: 'conic-gradient(rgb(var(--ps-color-danger-rgb)), rgb(255 255 255 / 0.85), rgb(var(--ps-color-danger-rgb) / 0.7), rgb(var(--ps-color-danger-rgb)))',
+        ripple: 'rgb(var(--ps-color-danger-rgb) / 0.5)',
+        core: 'radial-gradient(circle, rgb(255 255 255 / 0.9), rgb(var(--ps-color-danger-rgb) / 0.7) 35%, transparent 70%)',
+    },
+};

package/dist/hooks/use-ps-invisible-recaptcha.d.ts

@@ -18,10 +18,12 @@ declare global {
 export type PsRecaptchaBadgePosition = 'bottomright' | 'bottomleft' | 'inline';
 export interface UsePsInvisibleRecaptchaOptions {
     siteKey: string;
+    /** reCAPTCHA api.js URL (without query), read from the consuming app's env. */
+    scriptUrl: string;
     badgePosition?: PsRecaptchaBadgePosition;
 }
 export interface UsePsInvisibleRecaptcha {
     execute: () => Promise<string>;
     isReady: boolean;
 }
-export declare const usePsInvisibleRecaptcha: ({ siteKey, badgePosition, }: UsePsInvisibleRecaptchaOptions) => UsePsInvisibleRecaptcha;
+export declare const usePsInvisibleRecaptcha: ({ siteKey, scriptUrl, badgePosition, }: UsePsInvisibleRecaptchaOptions) => UsePsInvisibleRecaptcha;

package/dist/hooks/use-ps-invisible-recaptcha.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePsInvisibleRecaptcha = void 0;
 const react_1 = require("react");
-const SCRIPT_SRC = 'https://www.google.com/recaptcha/api.js?render=explicit';
 let scriptLoadPromise = null;
-const loadRecaptchaScript = () => {
+const explicitRenderQuery = 'render=explicit';
+const loadRecaptchaScript = (scriptUrl) => {
     if (scriptLoadPromise)
         return scriptLoadPromise;
+    const scriptSrc = `${scriptUrl}?${explicitRenderQuery}`;
     scriptLoadPromise = new Promise((resolve, reject) => {
-        const existing = document.querySelector(`script[src="${SCRIPT_SRC}"]`);
+        const existing = document.querySelector(`script[src="${scriptSrc}"]`);
         if (existing) {
             existing.addEventListener('load', () => resolve());
             existing.addEventListener('error', () => reject(new Error('Failed to load reCAPTCHA')));
@@ -17,7 +18,7 @@ const loadRecaptchaScript = () => {
             return;
         }
         const script = document.createElement('script');
-        script.src = SCRIPT_SRC;
+        script.src = scriptSrc;
         script.async = true;
         script.defer = true;
         script.onload = () => resolve();
@@ -26,7 +27,7 @@ const loadRecaptchaScript = () => {
     });
     return scriptLoadPromise;
 };
-const usePsInvisibleRecaptcha = ({ siteKey, badgePosition = 'bottomright', }) => {
+const usePsInvisibleRecaptcha = ({ siteKey, scriptUrl, badgePosition = 'bottomright', }) => {
     const [isReady, setIsReady] = (0, react_1.useState)(false);
     const widgetIdRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
@@ -37,7 +38,7 @@ const usePsInvisibleRecaptcha = ({ siteKey, badgePosition = 'bottomright', }) =>
         container.style.display = 'none';
         document.body.appendChild(container);
         containerRef.current = container;
-        loadRecaptchaScript()
+        loadRecaptchaScript(scriptUrl)
             .then(() => {
             if (!isMounted || !window.grecaptcha)
                 return;
@@ -73,7 +74,7 @@ const usePsInvisibleRecaptcha = ({ siteKey, badgePosition = 'bottomright', }) =>
             container.remove();
             containerRef.current = null;
         };
-    }, [siteKey, badgePosition]);
+    }, [siteKey, scriptUrl, badgePosition]);
     const execute = (0, react_1.useCallback)(() => {
         return new Promise((resolve, reject) => {
             if (!window.grecaptcha || widgetIdRef.current === null) {

package/dist/hooks/use-ps-route-loader-data.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createPsRouteLoaderDataHook = void 0;
-const react_1 = require("@remix-run/react");
 const createPsRouteLoaderDataHook = (routeId) => {
     let cache;
     return () => {
-        const data = (0, react_1.useRouteLoaderData)(routeId);
+        const { useRouteLoaderData } = require('@remix-run/react');
+        const data = useRouteLoaderData(routeId);
         if (data !== undefined)
             cache = data;
         if (cache === undefined)

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from './components/ps-metric-card';
 export * from './components/ps-pill';
 export * from './components/ps-portable-text';
 export * from './components/ps-reflective-app-shell';
+export * from './components/ps-navigation-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './components/ps-skeleton';
@@ -26,3 +27,4 @@ export * from './hooks/use-ps-invisible-recaptcha';
 export * from './hooks/use-ps-route-loader-data';
 export * from './hooks/use-ps-viewport';
 export * from './interfaces/ps-component-props';
+export * from './models/ps-voice-orb';

package/dist/index.js

@@ -29,6 +29,7 @@ __exportStar(require("./components/ps-metric-card"), exports);
 __exportStar(require("./components/ps-pill"), exports);
 __exportStar(require("./components/ps-portable-text"), exports);
 __exportStar(require("./components/ps-reflective-app-shell"), exports);
+__exportStar(require("./components/ps-navigation-progress"), exports);
 __exportStar(require("./components/ps-section-header"), exports);
 __exportStar(require("./components/ps-site-header"), exports);
 __exportStar(require("./components/ps-skeleton"), exports);
@@ -42,3 +43,4 @@ __exportStar(require("./hooks/use-ps-invisible-recaptcha"), exports);
 __exportStar(require("./hooks/use-ps-route-loader-data"), exports);
 __exportStar(require("./hooks/use-ps-viewport"), exports);
 __exportStar(require("./interfaces/ps-component-props"), exports);
+__exportStar(require("./models/ps-voice-orb"), exports);

package/dist/models/ps-voice-orb.d.ts

@@ -0,0 +1,23 @@
+export type PsVoiceOrbState = 'idle' | 'connecting' | 'listening' | 'thinking' | 'speaking' | 'error';
+export interface PsVoiceOrbProps {
+    className?: string;
+    level?: number;
+    size?: number;
+    state?: PsVoiceOrbState;
+    variant?: 'default' | 'error';
+}
+export interface PsVoiceOrbCadence {
+    spinS: number;
+    wobbleHz: number;
+    pulseHz: number;
+    pulseDepth: number;
+    blobDepth: number;
+    orbitDepth: number;
+    isRippling: boolean;
+}
+export interface PsVoiceOrbTheme {
+    glass: string;
+    rim: string;
+    ripple: string;
+    core: string;
+}

package/dist/models/ps-voice-orb.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "1.4.0",
+	"version": "2.1.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -33,10 +33,10 @@
 		"@portabletext/react": "^3.2.4",
 		"@portabletext/types": "^2.0.13",
 		"@radix-ui/react-accordion": "^1.2.12",
-		"react-infinite-scroll-component": "^6.1.1"
+		"react-infinite-scroll-component": "^6.1.1",
+		"react-top-loading-bar": "^3.0.2"
 	},
 	"peerDependencies": {
-		"@remix-run/react": "^2.0.0",
 		"react": "^18 || ^19"
 	},
 	"devDependencies": {
@@ -62,6 +62,8 @@
 		"husky": "^9.1.7",
 		"lint-staged": "^16.2.7",
 		"prettier": "^3.6.2",
+		"react": "^19.3.0",
+		"react-dom": "^19.3.0",
 		"semantic-release": "^24.2.0",
 		"ts-node": "^10.9.2",
 		"typescript": "^5.9.3"