@pallasoft/ps-core-components 2.11.3 → 2.13.0

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

@@ -12,6 +12,6 @@ const PsReflectiveAppShell = ({ children, className, contentClassName, frameClas
         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 h-[100dvh] overflow-hidden 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-full 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: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 })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink', className), children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-liquid-strong grid h-full min-h-0 w-full overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)]', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, (0, jsx_runtime_1.jsx)("main", { ref: contentRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
 };
 exports.PsReflectiveAppShell = PsReflectiveAppShell;

package/dist/components/ps-scaled-preview.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface PsScaledPreviewProps {
+    children: ReactNode;
+    className?: string;
+    designWidth?: number;
+    isDecorative?: boolean;
+}
+export declare const PsScaledPreview: ({ children, className, designWidth, isDecorative, }: PsScaledPreviewProps) => import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScaledPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_scaled_preview_config_1 = require("../constants/ps-scaled-preview-config");
+const use_ps_element_size_1 = require("../hooks/use-ps-element-size");
+const PsScaledPreview = ({ children, className, designWidth = ps_scaled_preview_config_1.PsScaledPreviewConfig.designWidth, isDecorative = true, }) => {
+    const [frameRef, frame] = (0, use_ps_element_size_1.usePsElementSize)();
+    const [contentRef, content] = (0, use_ps_element_size_1.usePsElementSize)();
+    const scale = frame.width === 0 ? 0 : Math.min(ps_scaled_preview_config_1.PsScaledPreviewConfig.maxScale, frame.width / designWidth);
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": isDecorative ? 'true' : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('relative w-full overflow-hidden', isDecorative ? 'pointer-events-none select-none' : '', className), ref: frameRef, style: { height: content.height * scale }, children: (0, jsx_runtime_1.jsx)("div", { className: 'absolute top-0 left-0 origin-top-left', ref: contentRef, style: { transform: `scale(${scale})`, width: designWidth }, children: children }) }));
+};
+exports.PsScaledPreview = PsScaledPreview;

package/dist/constants/ps-scaled-preview-config.d.ts

@@ -0,0 +1,4 @@
+export declare const PsScaledPreviewConfig: {
+    readonly designWidth: 880;
+    readonly maxScale: 1;
+};

package/dist/constants/ps-scaled-preview-config.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScaledPreviewConfig = void 0;
+exports.PsScaledPreviewConfig = {
+    designWidth: 880,
+    maxScale: 1,
+};

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

@@ -9,5 +9,5 @@ export const PsReflectiveAppShell = ({ children, className, contentClassName, fr
         contentRef.current?.scrollTo({ top: 0, left: 0 });
         window.scrollTo({ top: 0, left: 0 });
     }, [scrollResetKey]);
-    return (_jsx("section", { className: PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink lg:px-3 lg:py-3', className), children: _jsxs("div", { className: PallasoftClassNameService.merge('ps-liquid-strong mx-auto grid h-full 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: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 })] })] }) }));
+    return (_jsx("section", { className: PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink', className), children: _jsxs("div", { className: PallasoftClassNameService.merge('ps-liquid-strong grid h-full min-h-0 w-full overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)]', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, _jsxs("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, _jsx("main", { ref: contentRef, className: PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
 };

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsScaledPreviewConfig } from '../constants/ps-scaled-preview-config';
+import { usePsElementSize } from '../hooks/use-ps-element-size';
+export const PsScaledPreview = ({ children, className, designWidth = PsScaledPreviewConfig.designWidth, isDecorative = true, }) => {
+    const [frameRef, frame] = usePsElementSize();
+    const [contentRef, content] = usePsElementSize();
+    const scale = frame.width === 0 ? 0 : Math.min(PsScaledPreviewConfig.maxScale, frame.width / designWidth);
+    return (_jsx("div", { "aria-hidden": isDecorative ? 'true' : undefined, className: PallasoftClassNameService.merge('relative w-full overflow-hidden', isDecorative ? 'pointer-events-none select-none' : '', className), ref: frameRef, style: { height: content.height * scale }, children: _jsx("div", { className: 'absolute top-0 left-0 origin-top-left', ref: contentRef, style: { transform: `scale(${scale})`, width: designWidth }, children: children }) }));
+};

package/dist/esm/constants/ps-scaled-preview-config.js

@@ -0,0 +1,4 @@
+export const PsScaledPreviewConfig = {
+    designWidth: 880,
+    maxScale: 1,
+};

package/dist/esm/hooks/use-ps-element-size.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef, useState } from 'react';
+export const usePsElementSize = () => {
+    const ref = useRef(null);
+    const [size, setSize] = useState({ height: 0, width: 0 });
+    useEffect(() => {
+        const node = ref.current;
+        if (node === null)
+            return;
+        const observer = new ResizeObserver(([entry]) => setSize({ height: entry.contentRect.height, width: entry.contentRect.width }));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return [ref, size];
+};

package/dist/esm/index.js

@@ -15,11 +15,13 @@ 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-scaled-preview';
 export * from './components/ps-navigation-progress';
 export * from './components/ps-step-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './hooks/use-ps-published-height';
+export * from './constants/ps-scaled-preview-config';
 export * from './constants/ps-site-header-config';
 export * from './components/ps-skeleton';
 export * from './constants/ps-skeleton-shape';
@@ -39,8 +41,10 @@ export * from './hooks/use-ps-invisible-recaptcha';
 export * from './contexts/ps-layer-context';
 export * from './hooks/use-ps-layer-z-index';
 export * from './hooks/use-ps-route-loader-data';
+export * from './hooks/use-ps-element-size';
 export * from './hooks/use-ps-viewport';
 export * from './interfaces/ps-component-props';
+export * from './models/ps-element-size';
 export * from './models/ps-voice-orb';
 export * from './models/ps-navigation-progress';
 export * from './hooks/use-ps-debounced-value';

package/dist/esm/models/ps-element-size.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/use-ps-element-size.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+import { PsElementSize } from '../models/ps-element-size';
+export declare const usePsElementSize: <Element extends HTMLElement>() => [RefObject<Element>, PsElementSize];

package/dist/hooks/use-ps-element-size.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsElementSize = void 0;
+const react_1 = require("react");
+const usePsElementSize = () => {
+    const ref = (0, react_1.useRef)(null);
+    const [size, setSize] = (0, react_1.useState)({ height: 0, width: 0 });
+    (0, react_1.useEffect)(() => {
+        const node = ref.current;
+        if (node === null)
+            return;
+        const observer = new ResizeObserver(([entry]) => setSize({ height: entry.contentRect.height, width: entry.contentRect.width }));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return [ref, size];
+};
+exports.usePsElementSize = usePsElementSize;

package/dist/index.d.ts

@@ -15,11 +15,13 @@ 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-scaled-preview';
 export * from './components/ps-navigation-progress';
 export * from './components/ps-step-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './hooks/use-ps-published-height';
+export * from './constants/ps-scaled-preview-config';
 export * from './constants/ps-site-header-config';
 export * from './components/ps-skeleton';
 export * from './constants/ps-skeleton-shape';
@@ -39,8 +41,10 @@ export * from './hooks/use-ps-invisible-recaptcha';
 export * from './contexts/ps-layer-context';
 export * from './hooks/use-ps-layer-z-index';
 export * from './hooks/use-ps-route-loader-data';
+export * from './hooks/use-ps-element-size';
 export * from './hooks/use-ps-viewport';
 export * from './interfaces/ps-component-props';
+export * from './models/ps-element-size';
 export * from './models/ps-voice-orb';
 export * from './models/ps-navigation-progress';
 export * from './hooks/use-ps-debounced-value';

package/dist/index.js

@@ -31,11 +31,13 @@ __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-scaled-preview"), exports);
 __exportStar(require("./components/ps-navigation-progress"), exports);
 __exportStar(require("./components/ps-step-progress"), exports);
 __exportStar(require("./components/ps-section-header"), exports);
 __exportStar(require("./components/ps-site-header"), exports);
 __exportStar(require("./hooks/use-ps-published-height"), exports);
+__exportStar(require("./constants/ps-scaled-preview-config"), exports);
 __exportStar(require("./constants/ps-site-header-config"), exports);
 __exportStar(require("./components/ps-skeleton"), exports);
 __exportStar(require("./constants/ps-skeleton-shape"), exports);
@@ -55,8 +57,10 @@ __exportStar(require("./hooks/use-ps-invisible-recaptcha"), exports);
 __exportStar(require("./contexts/ps-layer-context"), exports);
 __exportStar(require("./hooks/use-ps-layer-z-index"), exports);
 __exportStar(require("./hooks/use-ps-route-loader-data"), exports);
+__exportStar(require("./hooks/use-ps-element-size"), exports);
 __exportStar(require("./hooks/use-ps-viewport"), exports);
 __exportStar(require("./interfaces/ps-component-props"), exports);
+__exportStar(require("./models/ps-element-size"), exports);
 __exportStar(require("./models/ps-voice-orb"), exports);
 __exportStar(require("./models/ps-navigation-progress"), exports);
 __exportStar(require("./hooks/use-ps-debounced-value"), exports);

package/dist/models/ps-element-size.d.ts

@@ -0,0 +1,4 @@
+export interface PsElementSize {
+    height: number;
+    width: number;
+}

package/dist/models/ps-element-size.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": "2.11.3",
+	"version": "2.13.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",