@pallasoft/ps-core-components 2.3.0 → 2.4.0

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PortableText as Text } from '@portabletext/react';
+export 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;
+    const getHeaderClass = hasContainerStyles ? '' : headerClasses;
+    const getListClass = hasContainerStyles ? '' : listClasses;
+    const components = {
+        marks: {
+            link: ({ children, value }) => {
+                const rel = !value.href.startsWith('/') ? 'noreferrer noopener' : undefined;
+                return (_jsx(LinkComponent, { href: value.href, rel: rel, className: linkClassName, "aria-label": value.children, children: children }));
+            },
+        },
+        list: {
+            bullet: ({ children }) => _jsx("ul", { className: 'mb-3 mt-1 list-disc ml-4', children: children }),
+            number: ({ children }) => _jsx("ol", { className: 'mb-3 mt-1 list-decimal ml-4', children: children }),
+        },
+        listItem: {
+            bullet: ({ children }) => (_jsx("li", { className: PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', getListClass), children: children })),
+            number: ({ children }) => (_jsx("li", { className: PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', getListClass), children: children })),
+        },
+        block: {
+            normal: ({ children }) => (_jsx("p", { className: PallasoftClassNameService.merge(isLargeBodyFont ? 'text-body-1' : 'text-body-2', 'whitespace-pre-line', getBodyClass), children: children })),
+            h2: ({ children }) => (_jsx("h2", { className: PallasoftClassNameService.merge('text-header-1 py-2', getHeaderClass), children: children })),
+            h3: ({ children }) => (_jsx("h3", { className: PallasoftClassNameService.merge('text-header-2 py-2', getHeaderClass), children: children })),
+            h4: ({ children }) => (_jsx("h4", { className: PallasoftClassNameService.merge('text-header-3 py-2', getHeaderClass), children: children })),
+            h5: ({ children }) => (_jsx("h5", { className: PallasoftClassNameService.merge('text-header-3 py-1', getHeaderClass), children: children })),
+            h6: ({ children }) => (_jsx("h6", { className: PallasoftClassNameService.merge('text-header-4 py-1', getHeaderClass), children: children })),
+        },
+    };
+    return (_jsx("div", { className: containerClasses, style: containerStyles, children: _jsx(Text, { value: text, components: components }) }));
+};

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsReflectiveAppShell = ({ children, className, contentClassName, frameClassName, scrollResetKey, sidebar, sidebarWidth = '17rem', topbar, }) => {
+    const contentRef = useRef(null);
+    useLayoutEffect(() => {
+        if (scrollResetKey === undefined)
+            return;
+        contentRef.current?.scrollTo({ top: 0, left: 0 });
+        window.scrollTo({ top: 0, left: 0 });
+    }, [scrollResetKey]);
+    return (_jsx("section", { className: PallasoftClassNameService.merge('ps-reflective-frame min-h-screen text-ink lg:px-3 lg:py-3', className), children: _jsxs("div", { className: 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, _jsxs("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, _jsx("main", { ref: contentRef, className: PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
+};

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsSectionHeader = ({ description, eyebrow, leading, title, trailing, }) => (_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: 'ml-auto flex shrink-0 items-center', children: trailing }) : null] }));

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

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

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsSkeleton = ({ className }) => (_jsx("div", { className: PallasoftClassNameService.merge('animate-pulse rounded-full bg-mist', className) }));

package/dist/esm/components/ps-spinner.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const colorClassNames = {
+    current: 'text-current',
+    primary: 'text-primary',
+};
+const sizeClassNames = {
+    small: 'h-4 w-4 border-2',
+    default: 'h-6 w-6 border-2',
+    large: 'h-8 w-8 border-[3px]',
+};
+export const PsSpinner = ({ className, color = 'primary', label = 'Loading', size = 'default', ...props }) => (_jsxs("div", { className: PallasoftClassNameService.merge('inline-flex items-center justify-center', colorClassNames[color], className), ...props, children: [_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('shrink-0 animate-spin rounded-full border-current border-t-transparent', sizeClassNames[size]) }), _jsx("span", { className: 'sr-only', children: label })] }));

package/dist/esm/components/ps-theme-toggle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService, PallasoftThemeMode, PallasoftThemeModeService, } from '@pallasoft/ps-design-system';
+import { PsIcon } from '@pallasoft/ps-icons';
+export const PsThemeToggle = ({ className, mode, type = 'button', ...props }) => {
+    const isDarkMode = mode === PallasoftThemeMode.Dark;
+    return (_jsxs("button", { "aria-label": isDarkMode ? 'Switch to light mode' : 'Switch to dark mode', className: PallasoftClassNameService.merge('ps-focus-ring ps-glass flex h-11 items-center gap-2 rounded-2xl px-3 text-sm font-bold text-ink transition hover:border-primary/30 hover:text-primary', className), type: type, ...props, children: [_jsx(PsIcon, { className: 'h-5 w-5', iconKey: isDarkMode ? 'sun' : 'moon' }), _jsx("span", { className: 'hidden sm:inline', children: PallasoftThemeModeService.getNextMode(mode) === PallasoftThemeMode.Dark ? 'Dark' : 'Light' })] }));
+};

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsVoiceOrbCadenceByState, PsVoiceOrbConfig, PsVoiceOrbThemes, } from '../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(PsVoiceOrbConfig.rimInnerStopPercent);
+const buildBlobRadius = (phase, depth) => {
+    const harmonic = 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)}%`;
+};
+export const PsVoiceOrb = (props) => {
+    const size = typeof props.size === 'number' ? props.size : PsVoiceOrbConfig.defaultSize;
+    const level = typeof props.level === 'number' ? clamp(props.level, 0, 1) : 0;
+    const state = props.state ? props.state : props.variant === 'error' ? 'error' : 'idle';
+    const isError = state === 'error' || props.variant === 'error';
+    const cadence = PsVoiceOrbCadenceByState[state];
+    const theme = PsVoiceOrbThemes[isError ? 'error' : 'default'];
+    const containerRef = useRef(null);
+    const glowRef = useRef(null);
+    const glassRef = useRef(null);
+    const rimRef = useRef(null);
+    const coreRef = useRef(null);
+    const targetLevelRef = useRef(level);
+    const cadenceRef = useRef(cadence);
+    targetLevelRef.current = level;
+    cadenceRef.current = cadence;
+    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, 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 * PsVoiceOrbConfig.coreOrbitHz * Math.PI * 2;
+            smoothedLevel = approach(smoothedLevel, targetLevelRef.current, PsVoiceOrbConfig.levelSmoothing);
+            smoothedPulse = approach(smoothedPulse, activeCadence.pulseDepth, PsVoiceOrbConfig.cadenceSmoothing);
+            smoothedBlob = approach(smoothedBlob, activeCadence.blobDepth, PsVoiceOrbConfig.blobSmoothing);
+            smoothedOrbit = approach(smoothedOrbit, activeCadence.orbitDepth, PsVoiceOrbConfig.blobSmoothing);
+            const voice = Math.pow(smoothedLevel, 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(PsVoiceOrbConfig.rimInnerStopPercent - amplitude * PsVoiceOrbConfig.rimAmplitudeSpread);
+                rimRef.current.style.transform = `rotate(${spinDegrees}deg)`;
+                rimRef.current.style.maskImage = mask;
+                rimRef.current.style.webkitMaskImage = mask;
+            }
+            if (coreRef.current) {
+                const radius = 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 (_jsxs("span", { ref: containerRef, className: PallasoftClassNameService.merge('ps-voice-orb relative inline-flex shrink-0 items-center justify-center', props.className), style: { width: size, height: size }, children: [_jsx("span", { ref: glowRef, "aria-hidden": 'true', className: 'absolute inset-0 rounded-full opacity-40 blur-xl', style: { background: theme.rim } }), _jsxs("span", { ref: glassRef, "aria-hidden": 'true', className: 'absolute inset-0 overflow-hidden rounded-full', children: [_jsx("span", { className: 'absolute inset-0', style: { background: theme.glass } }), _jsx("span", { ref: rimRef, className: 'absolute inset-0', style: {
+                            background: theme.rim,
+                            maskImage: initialRimMask,
+                            WebkitMaskImage: initialRimMask,
+                        } }), _jsx("span", { ref: coreRef, className: 'absolute left-1/2 top-1/2 rounded-full opacity-0 blur-sm', style: {
+                            background: theme.core,
+                            width: `${PsVoiceOrbConfig.coreSizePercent}%`,
+                            height: `${PsVoiceOrbConfig.coreSizePercent}%`,
+                        } })] }), cadence.isRippling
+                ? PsVoiceOrbConfig.rippleDelaysMs.map((delayMs) => (_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] }));
+};

package/dist/esm/constants/ps-draggable-grid.js

@@ -0,0 +1,23 @@
+export const PsDraggableGridConfig = {
+    activationDistance: 6,
+    dropDuration: 220,
+    dropEasing: 'cubic-bezier(0.2, 0.8, 0.2, 1)',
+    liftDuration: 200,
+    liftEasing: 'cubic-bezier(0.2, 0.9, 0.3, 1.2)',
+    placeholderOpacity: '0.4',
+    touchDelay: 180,
+    touchTolerance: 6,
+};
+export const PsDraggableGridClasses = {
+    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100',
+    item: 'min-w-0 rounded-[1.7rem]',
+    lifted: 'cursor-grabbing rounded-[1.7rem] ring-1 ring-primary/30',
+    placeholder: 'rounded-[1.7rem] outline-dashed outline-2 outline-offset-[-2px] outline-primary/35',
+};
+export const PsDraggableGridLiftFrames = [
+    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1) rotate(0deg)' },
+    {
+        boxShadow: '0 28px 64px -18px rgb(15 23 42 / 0.5)',
+        transform: 'scale(1.035) rotate(-1.2deg)',
+    },
+];

package/dist/esm/constants/ps-navigation-progress-config.js

@@ -0,0 +1,12 @@
+export const PsNavigationProgressConfig = {
+    completeWidth: 100,
+    defaultColor: 'rgb(var(--ps-color-primary-rgb))',
+    defaultHeight: 3,
+    defaultLabel: 'Page loading',
+    fadeMs: 320,
+    startWidth: 12,
+    transitionMs: 240,
+    trickleFactor: 0.14,
+    trickleMax: 90,
+    trickleMs: 260,
+};

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

@@ -0,0 +1,85 @@
+export const 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,
+};
+export const 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,
+    },
+};
+export const 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/esm/contexts/ps-layer-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const PsLayerContext = createContext(null);

package/dist/esm/hooks/use-ps-audio-spectrum.js

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react';
+export const usePsAudioSpectrum = (audioElement, options = {}) => {
+    const DefaultBarCount = 12;
+    const DefaultFftSize = 128;
+    const DefaultSmoothing = 0.75;
+    const barCount = typeof options.barCount === 'number' ? options.barCount : DefaultBarCount;
+    const fftSize = typeof options.fftSize === 'number' ? options.fftSize : DefaultFftSize;
+    const smoothing = typeof options.smoothing === 'number' ? options.smoothing : DefaultSmoothing;
+    const [levels, setLevels] = useState(() => Array(barCount).fill(0));
+    const configRef = useRef({ barCount, fftSize, smoothing });
+    configRef.current = { barCount, fftSize, smoothing };
+    useEffect(() => {
+        if (!audioElement)
+            return;
+        const AudioContextClass = typeof window === 'undefined'
+            ? undefined
+            : window.AudioContext || window.webkitAudioContext;
+        if (!AudioContextClass)
+            return;
+        const audioContext = new AudioContextClass();
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = configRef.current.fftSize;
+        analyser.smoothingTimeConstant = configRef.current.smoothing;
+        const source = audioContext.createMediaElementSource(audioElement);
+        source.connect(analyser);
+        analyser.connect(audioContext.destination);
+        const buffer = new Uint8Array(analyser.frequencyBinCount);
+        let animationFrame;
+        const tick = () => {
+            analyser.getByteFrequencyData(buffer);
+            const activeBarCount = configRef.current.barCount;
+            const binsPerBar = Math.max(1, Math.floor(buffer.length / activeBarCount));
+            const nextLevels = [];
+            for (let bar = 0; bar < activeBarCount; bar++) {
+                let sum = 0;
+                const start = bar * binsPerBar;
+                const end = start + binsPerBar;
+                for (let bin = start; bin < end; bin++) {
+                    sum += bin < buffer.length ? buffer[bin] : 0;
+                }
+                nextLevels.push(Math.min(1, sum / binsPerBar / 255));
+            }
+            setLevels(nextLevels);
+            animationFrame = requestAnimationFrame(tick);
+        };
+        const resumeAudioContext = () => {
+            if (audioContext.state === 'suspended')
+                audioContext.resume().catch(() => undefined);
+        };
+        const gestureEvents = ['touchend', 'mousedown', 'keydown'];
+        resumeAudioContext();
+        audioElement.addEventListener('play', resumeAudioContext);
+        gestureEvents.forEach((eventName) => document.addEventListener(eventName, resumeAudioContext, { once: true }));
+        animationFrame = requestAnimationFrame(tick);
+        return () => {
+            cancelAnimationFrame(animationFrame);
+            audioElement.removeEventListener('play', resumeAudioContext);
+            gestureEvents.forEach((eventName) => document.removeEventListener(eventName, resumeAudioContext));
+            source.disconnect();
+            analyser.disconnect();
+            audioContext.close().catch(() => undefined);
+        };
+    }, [audioElement]);
+    return { levels };
+};

package/dist/esm/hooks/use-ps-exit-transition.js

@@ -0,0 +1,29 @@
+import { useEffect, useRef, useState } from 'react';
+export const usePsExitTransition = (isOpen, durationMs = 180) => {
+    const [shouldRender, setShouldRender] = useState(isOpen);
+    const [isClosing, setIsClosing] = useState(false);
+    const timeoutRef = useRef();
+    const hasRenderedRef = useRef(isOpen);
+    useEffect(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (isOpen) {
+            setShouldRender(true);
+            setIsClosing(false);
+            return;
+        }
+        if (!hasRenderedRef.current)
+            return;
+        setIsClosing(true);
+        timeoutRef.current = setTimeout(() => {
+            setShouldRender(false);
+            setIsClosing(false);
+        }, durationMs);
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [isOpen, durationMs]);
+    hasRenderedRef.current = shouldRender;
+    return { isClosing, shouldRender };
+};

package/dist/esm/hooks/use-ps-hide-on-scroll.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+export const usePsHideOnScroll = (options = {}) => {
+    const { threshold = 8 } = options;
+    const [hidden, setHidden] = useState(false);
+    const lastScrollY = useRef(0);
+    useEffect(() => {
+        lastScrollY.current = window.scrollY;
+        const onScroll = () => {
+            const currentScrollY = window.scrollY;
+            const delta = currentScrollY - lastScrollY.current;
+            if (currentScrollY <= 0) {
+                setHidden(false);
+                lastScrollY.current = currentScrollY;
+                return;
+            }
+            if (Math.abs(delta) < threshold)
+                return;
+            setHidden(delta > 0);
+            lastScrollY.current = currentScrollY;
+        };
+        window.addEventListener('scroll', onScroll, { passive: true });
+        return () => window.removeEventListener('scroll', onScroll);
+    }, [threshold]);
+    return hidden;
+};

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

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+let scriptLoadPromise = null;
+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="${scriptSrc}"]`);
+        if (existing) {
+            existing.addEventListener('load', () => resolve());
+            existing.addEventListener('error', () => reject(new Error('Failed to load reCAPTCHA')));
+            if (window.grecaptcha)
+                resolve();
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = scriptSrc;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error('Failed to load reCAPTCHA'));
+        document.head.appendChild(script);
+    });
+    return scriptLoadPromise;
+};
+export const usePsInvisibleRecaptcha = ({ siteKey, scriptUrl, badgePosition = 'bottomright', }) => {
+    const [isReady, setIsReady] = useState(false);
+    const widgetIdRef = useRef(null);
+    const containerRef = useRef(null);
+    const pendingRef = useRef(null);
+    useEffect(() => {
+        let isMounted = true;
+        const container = document.createElement('div');
+        container.style.display = 'none';
+        document.body.appendChild(container);
+        containerRef.current = container;
+        loadRecaptchaScript(scriptUrl)
+            .then(() => {
+            if (!isMounted || !window.grecaptcha)
+                return;
+            window.grecaptcha.ready(() => {
+                if (!isMounted || !window.grecaptcha || !containerRef.current)
+                    return;
+                widgetIdRef.current = window.grecaptcha.render(containerRef.current, {
+                    'sitekey': siteKey,
+                    'size': 'invisible',
+                    'badge': badgePosition,
+                    'callback': (token) => {
+                        pendingRef.current?.resolve(token);
+                        pendingRef.current = null;
+                    },
+                    'expired-callback': () => {
+                        pendingRef.current?.reject(new Error('reCAPTCHA expired'));
+                        pendingRef.current = null;
+                    },
+                    'error-callback': () => {
+                        pendingRef.current?.reject(new Error('reCAPTCHA verification failed'));
+                        pendingRef.current = null;
+                    },
+                });
+                setIsReady(true);
+            });
+        })
+            .catch(() => {
+            if (isMounted)
+                setIsReady(false);
+        });
+        return () => {
+            isMounted = false;
+            container.remove();
+            containerRef.current = null;
+        };
+    }, [siteKey, scriptUrl, badgePosition]);
+    const execute = useCallback(() => {
+        return new Promise((resolve, reject) => {
+            if (!window.grecaptcha || widgetIdRef.current === null) {
+                reject(new Error('reCAPTCHA is not ready yet'));
+                return;
+            }
+            pendingRef.current = { resolve, reject };
+            window.grecaptcha.execute(widgetIdRef.current);
+        }).finally(() => {
+            if (window.grecaptcha && widgetIdRef.current !== null) {
+                window.grecaptcha.reset(widgetIdRef.current);
+            }
+        });
+    }, []);
+    return { execute, isReady };
+};

package/dist/esm/hooks/use-ps-layer-z-index.js

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { PallasoftZIndexService } from '@pallasoft/ps-design-system';
+import { PsLayerContext } from '../contexts/ps-layer-context';
+export const usePsLayerZIndex = (layer) => PallasoftZIndexService.above(useContext(PsLayerContext), layer);

package/dist/esm/hooks/use-ps-navigation-progress.js

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from 'react';
+import { PsNavigationProgressConfig } from '../constants/ps-navigation-progress-config';
+const hidden = { isAnimated: false, isVisible: false, width: 0 };
+export const usePsNavigationProgress = (isLoading) => {
+    const [state, setState] = useState(hidden);
+    const timers = useRef([]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const clear = () => {
+            timers.current.forEach((timer) => window.clearTimeout(timer));
+            timers.current.forEach((timer) => window.clearInterval(timer));
+            timers.current = [];
+        };
+        clear();
+        if (isLoading) {
+            setState({ isAnimated: false, isVisible: true, width: 0 });
+            timers.current.push(window.setTimeout(() => setState({
+                isAnimated: true,
+                isVisible: true,
+                width: PsNavigationProgressConfig.startWidth,
+            }), 0), window.setInterval(() => setState((current) => ({
+                ...current,
+                width: current.width +
+                    (PsNavigationProgressConfig.trickleMax - current.width) *
+                        PsNavigationProgressConfig.trickleFactor,
+            })), PsNavigationProgressConfig.trickleMs));
+            return clear;
+        }
+        setState((current) => current.isVisible
+            ? {
+                isAnimated: true,
+                isVisible: true,
+                width: PsNavigationProgressConfig.completeWidth,
+            }
+            : current);
+        timers.current.push(window.setTimeout(() => setState((current) => ({ ...current, isVisible: false })), PsNavigationProgressConfig.transitionMs), window.setTimeout(() => setState(hidden), PsNavigationProgressConfig.transitionMs + PsNavigationProgressConfig.fadeMs));
+        return clear;
+    }, [isLoading]);
+    return state;
+};

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

@@ -0,0 +1,12 @@
+export const createPsRouteLoaderDataHook = (routeId) => {
+    let cache;
+    return () => {
+        const { useRouteLoaderData } = require('@remix-run/react');
+        const data = useRouteLoaderData(routeId);
+        if (data !== undefined)
+            cache = data;
+        if (cache === undefined)
+            throw new Error(`No loader data found for route "${routeId}"`);
+        return cache;
+    };
+};

package/dist/esm/hooks/use-ps-viewport.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { PallasoftViewportService, PallasoftViewportTier } from '@pallasoft/ps-design-system';
+export const usePsViewport = (defaultTier = PallasoftViewportTier.Desktop) => {
+    const [tier, setTier] = useState(defaultTier);
+    useEffect(() => {
+        const resolve = () => setTier(PallasoftViewportService.getTier(window.innerWidth));
+        resolve();
+        const tabletQuery = window.matchMedia(PallasoftViewportService.getTabletQuery());
+        const desktopQuery = window.matchMedia(PallasoftViewportService.getDesktopQuery());
+        tabletQuery.addEventListener('change', resolve);
+        desktopQuery.addEventListener('change', resolve);
+        return () => {
+            tabletQuery.removeEventListener('change', resolve);
+            desktopQuery.removeEventListener('change', resolve);
+        };
+    }, []);
+    return tier;
+};